Question for Upload images issue

[Alam Khazi]

Hi,

By using Vuejs, Axios and Django, we're uploading "multiple images" using Vuejs form in one upload/browse attempt. After uploading, the images are getting in a list and then the list of images names are stored into backend in ImageField.  The image names are saving into database but not saving into Media Folder. Here is snippet of the code.

Vuejs

```

  <label>
    <span>Files</span>
    <input type="file" multiple @change="handleFileUploads($event)" />
    <ul v-if="files.length">
      <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
    </ul>
  </label>
  <div>
    <img v-for="image in images" :src="image" />
  </div>
  <br />
  <button v-on:click.prevent="submitForm">Submit</button>

```

Axiox

```
<script>
new Vue({
  el: '#app',
  data() {
    return {
      files: [],
      images: [],
    }
  },
  computed: {
    filesNames() {
      const fn = []
      for (let i = 0; i < this.files.length; ++i) {
        fn.push(this.files.item(i).name)

      }
      return fn
    }
  },
  methods: {
    handleFileUploads(event) {
      this.files = event.target.files;
      this.images = [...this.files].map(URL.createObjectURL);
    },
    submitFile() {
      let formData = new FormData();
      for (var i = 0; i < this.files.length; i++) {
        let file = this.files[i];
        formData.append('files[' + i + ']', file);
      }
     submitForm: function(){

                  let formData = new FormData();
                  const fna = []
                  for (let i = 0; i < this.files.length; ++i) {
                    fna.push(this.files.item(i).name)
                  }
                  console.log('fna');
                  console.log(fna);
            axios({
                method : "POST",
                url: "{% url 'service-ad' %}",
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}',
                'Content-Type': 'multipart/form-data'},
                data : {
                "images": fna,
                },
              }).then(response => {
                    console.log('SUCCESS!!');
              }).catch(err => {
                    console.log('FAILURE!!');
              }); 

    }
  }
})
</script>

```

Where as in other case we have similar functionality of uploading  'multiple images' in one upload/browse attempt, but here, we are using HTML form and the images names are saved in database as well as in Media Folder.

Django

```

def servicevue(request):
    if request.method == "POST":
        data = json.loads(request.body)
        images = data['images']
        img_length = len(images)
        if img_length == 1:
            image_name = images[0]
            image_name2 = ''
        elif img_length == 2:
            image_name = images[0]
            image_name2 = images[1]
        else:
            image_name = ''
            image_name2 = ''

        savehotel = Hotel(
                          image=image_name,
                          image2=image_name2,
                          )
        savehotel.save()
        messages.success(request, """Your Ad is successfully posted.""")
        return JsonResponse(safe=False)
    return render(request, 'servicead.html')

```

So we are wondering what could be the issue. We hope our code is correctly implemented. Please help me out whether this is any way to unblock this issue?

Best regards,

Salima