Hello,
I am more of interested in knowing the strategy for using the library like Dropzone.
I have products module so while creating a new product, with html file element I can select multiple files and submit form which will then create a product with an id and add images by reading $_FILES and assign product id to it. This is non-ajax way of doing it.
But using library like Dropbox which will upload images dynamically with AJAX. so how can I link those images with the product Id which is yet not created? Basically I want to let user click a new product button, open form with relevant fields and at the end image upload with preview functionality should be there. On submit the form will create a product and assign it to images uploaded.
What if user in create product form uploads the images and then chose not to continue and cancels the form. The images will remain on server. Is this the way that most multiple image uploader works ?
Either you have the upload of a product image during the creation of this one or you could create a "media storage system" that is not tied to anything and you can select a media from the ones you have uploaded during the product creation process
Dropzone offers an option called autoProcessQueue. If you set it to false it wont start the upload automatically.
You could send all form data (except the images) via AJAX to the server. Once the product is persisted and returned from the server, you can hook into and start the upload using myDropzone.processQueue().
Of course you will have to define a proper endpoint including the just received product->id. Maybe something like POST /products/{product}/files. This endpoint has to be passed to the url prop of Dropzone.
@LUDO237 - I wanted to upload image during product creation only but issue with dropzone is that it's ajax based and expects to upload image first and then submit would create a product. Creating media storage system sounds good but takes up extra development time.
@FLOXN - I had checked this option as well. But I am looking for a way to send all information together i.e. single button click action and then read $_REQUEST variable for form fields and $_FILES variable for all selected files on server.
But I guess that's not the way dropzone works? Is there any other library which works like this.
Basically a way so that when a user selects multiple images, it is previewed, validated etc and then on submit all form elements and files are sent to server together.
If you want to send all data synchronous, just use the native file upload with multiple flag:
<input type="file" id="file" name="file" accept="image/*,.pdf" multiple>
Validation should be done on the server anyway.
@MIHIRPATEL83 - If you need to do both at the same time you should try a "draft logic" approach
Please or to participate in this conversation.