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
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-users+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/CABscGkRXhvC6zALxCXvQN6-DmB%2BxedTSWO8KrPS2Nih0imZtXA%40mail.gmail.com.
