How do i enable `cachedFileArray` about file-upload-with-preview HOT 4 CLOSED

Hi,

To access the cachedFileArray in your example, simple view upload.cachedFileArray after a user has chosen their files.

The cachedFileArray is an array of File objects that is always kept up to date with the latest actions the user has taken on the preview panel. When you're ready, this collection of File objects can be uploaded to your backend. To do this, use a FormData object on your frontend and append() to the FormData object the contents of your cachedFileArray. Here is some example code using jQuery's ajax function:

var formElement = document.getElementById('entry-form');
var formData = new FormData(formElement);
formData.append('firstImage', upload.cachedFileArray[0]); // This will get the first image

$.ajax({
  url: "entry.php",
  type: "POST",
  dataType: "json",
  async: true,
  data: formData,
  contentType: false,
  processData: false,
  cache: false,
  success: function(data) {
    console.log(data)
  },
  error: function(error) {
    console.log(error)
  },
  complete: function(data) {
    console.log(data)
  }
})

Of course, if you have multiple images, you'll want to loop over them and add them accordingly to your formData object.

Ok, so if you follow this pattern, and have your backend PHP set up correctly, you'll be able to access these files in the $_FILES variable in the PHP - and more specifically, the $_FILES['firstImage'] variable according to this example.

Give that a shot, thank you.

from file-upload-with-preview.

Ok. Can you pleas make a simple example of uploading multiple images (loop) and with 2 text input.

var data = new FormData();

$.each($("input[type='file']")[0].files, function(i, file) {
    data.append('file', upload.cachedFileArray[0]);
});

or the above is right.?

https://stackoverflow.com/q/59195429/3836908 please have a look at my code

from file-upload-with-preview.

Sure - here's a codepen with a complete example featuring a loop. I've commented the JavaScript code heavily to break down the steps. You then can continue on using the ajax code I had given in my previous comment. You can use the Print button below the panel to print to the console and actually build the FormData instance. This will usually present itself as the Submit button in your actual app.

Thank you.

from file-upload-with-preview.

Hopefully that codepen can help point you in the right direction. Thank you.

from file-upload-with-preview.