Upload multiple images at a time

1

I want to upload multiple images to server at a time. How to achieve this in framework7. Any help ?

2

Просто отправляете по AJAX форму с input type=file

3

Can you reply in english. Thanks for the reply.

4

Are you using Cordova? I have used formData to post images.

var form = new FormData();
form.append("text", $$('.input').val());
window.resolveLocalFileSystemURL(result, function (fileEntry) {
      fileEntry.file(function (file) {
          var reader = new FileReader();
           reader.onloadend = function (e) {
           var imgBlob = new Blob([this.result], {type: '.png'});
             form.append('image', imgBlob, 'receipt.png');
           console.log("form data", form);
          app.request.post('url', form, function (result) {

This is not code you can copy and paste, you will need to familiarize yourself with a general purpose image uploading workflow in cordova. Here is a relevant stack overflow: https://stackoverflow.com/questions/47150331/how-to-upload-image-on-server-using-ajax-in-cordova-build

The specific framework7 code is: app.request.post('url', form, function (result) {}); Instead of $.ajax

5

Is it for single image or multiple images ??? I want to upload multiple images along with two different text values.

6

Hello,
Is there any reference code how to do it. I want to upload two images and two text field data to server. I am unable to find a proper code.

7

Do you have it working with a single image?

8 
let formData = new FormData();

formData.append("file1", file1)
formData.append("file2", file2)
formData.append("text1", "mytext1")
formData.append("text2", "mytext2")

// And then just post the fd with f7
1 Like
9

I am sending two images with other parameters using formdata. Its not working. Please find the below image for the reference.

file%20upload%20image
file upload image.png903×451 26.8 KB

10

You are appending the url to de FD?
You should append the image itself not the url.
Also, post any errors. Does the text files are sent ok to the backend?

11

I have two images. Then how can I append two images in FD. Its working for single image if I do it as file transfer mode. But I need to send multiple images with other parameters.

Please find the reference for single image file upload using file transfer.

single%20image
single image.png652×757 41.1 KB

12

Data is not posting to server while I am sending data as formdata.

13

Any solution plz…

14

Check this tutorial https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

It has everything you need to work with files

15

Here files are uploading in loop. But I don’t need to send only files in loop. I need to post two files along with some data to server. How is it possible.

16

@pvtallulah already answered, read that tutorial to understand what is the file and how to upload them without any plugins like FileTransfer

let formData = new FormData();
formData.append("file1", file1)
formData.append("file2", file2)
formData.append("text1", "mytext1")
formData.append("text2", "mytext2")
17

I click two photos using camera and get the file path. Along with two photos(file path) I want to send other parameters like latitude, longitude and name. When I upload this using formdata nothing seems to happen. Backend receives empty which is supposed to be file.(File Format/ Multipart).

18

Filepath/filename is not the same as File

19

Then, please suggest a solution for it. I am not getting a solution yet.

20

If you have a path. Then you should take that path and make a file or blob. Then append that file/blob.

Edit:
i do it this way. Yo may have to adapt the code to your needs. Also, dont know if this is the correct way. But it works for me;

dataURLtoFile (dataurl, filename) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
},
addFileSuccess (imgUrl) {
  let vm = this
  // For this line to work you need ionic webview plugin
  let url = window.Ionic ? window.Ionic.WebView.convertFileSrc(imgUrl) : imgUrl
  this.toDataUrl(url)
    .then(res => {
      let file = vm.dataURLtoFile(res, url.split('/').pop())
      let size = parseInt(file.size / 1024)
      this.fileSize += size
      this.files.push({
        file: file,
        img: true,
        id: this.$f7.utils.id(),
        name: url.split('/').pop(),
        size: size
      })
      this.$emit('filesChange', this.files)
    })
},
toDataUrl (url, callback) {
  return new Promise(async (resolve, reject) => {
    let reader = new FileReader()
    reader.onloadend = function () {
      resolve(reader.result)
    }
    reader.onerror = err => { reject(err) }
    reader.readAsDataURL(await imgtoBlob(url))
  })
}

// For this line to work you need ionic webview plugin
let url = window.Ionic ? window.Ionic.WebView.convertFileSrc(imgUrl) : imgUrl
// so: 
// <plugin name="cordova-plugin-ionic-webview" spec="^4.1.2" />