Comments (4)
Hello there,
I see that you're having issues uploading the files found in the cachedFileArray
to your PHP backend.
In looking at your code, I see a few places that could be causing the issue.
First, I understand that you want to pass the cachedFileArray
, which is an array
of JavaScript Files
using a hidden input. To be honest, I don't think this will work. I'm not totally sure, but to me, especially with the way you are JSON.stringify()
'ing the data, that will not pass the Files
to the backend properly.
Next, to access these files, once they are uploaded correctly from the frontend, the files will usually be in the $_FILES
variable in the PHP world. Now, this is all dependent on how you have your environment up, so this may not be the case for you, but this is the standard case.
So, if it were me, I would try to upload the files in a FormData type of object, which then you would send to the backend and would appear in the $_FILES
variable on the PHP side.
Here's some reading on this:
How to pass file from JavaScript to PHP?
jQuery AJAX file upload PHP
How to upload Multiple Image files with jQuery AJAX and PHP
Let me know, thank you.
from file-upload-with-preview.
I wrote a small library as per the requirement, that works fine and cross browser compatible as well.
I am may be wrong but even if I JSON.stringify() and parse back to arrays the cachedFileArray
in console itself not giving the proper output.
I checked all the previous bugs but one have that issue.
Still if you check it once.
And yes formData is a good option but I have to do just image preview work and complete project is already in production. To use formData I have to change many things in form submission and that will be a risky part 😢
from file-upload-with-preview.
Hmm, honestly I'm not sure, as I think it's the actual act of running JSON.stringify()
that changes the type of data the cachedFileArray
is holding and therefore causing the issue, which would be impossible to solve at that point.
I just responded to someone here about the FormData
method - I know you said that won't work for you know, but let me share that code here, so that maybe it can give you some idea on where you could go from here. Below is the copied code:
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.
Sorry I can't be of more help. Thank you.
from file-upload-with-preview.
Closing for now
from file-upload-with-preview.
Related Issues (20)
- How to access already added images while editing a form? HOT 2
- FileUploadWithPreview is not a constructor (extended with examples) HOT 2
- May I use html_form submit to backend? HOT 2
- how to capture the event with jquery? HOT 1
- There is no name attribute to get the image on backed HOT 4
- Beginner overloaded HOT 2
- Can I use this inside react [just react] ? HOT 2
- Name attribute not present in sending request to server. HOT 6
- file_upload_with_preview__WEBPACK_IMPORTED_MODULE_4__.FileUploadWithPreview is not a constructor HOT 4
- Use in Next js and Tailwind HOT 3
- bug on chooseFile label HOT 2
- Question: can I attach event to element, not to window? HOT 12
- Save in local storage HOT 2
- How to attach to previously initialized instance of FileUploadWithPreview? HOT 4
- How to dynamically click the clear button? HOT 1
- Added event confusion with presets and new add HOT 3
- IE11 HOT 3
- How to Change Input file label? HOT 1
- Need to Show The Browse Button HOT 1
- Rendered order of PresetFiles
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from file-upload-with-preview.