I am writing a small e-commerce website and I need to be able to allow users to upload their own custom images (limited to JPG or PNG) before they add to basket so that the images can be included with the order.
My current idea is to upload the files via AJAX and insert the filenames into the database so I can then link the images to a product and a specific order in the database. However, I have read that you cannot easily do this with AJAX as it is not yet supported?
Should I literally use a normal file upload form and process the $_FILES and $_POST requests after the form is submitted. This is already being done when items are being added to the basket so would be possible, although this could take a while to process the uploads.
Am I missing an obvious method that will solve the problem?
You need to post the form to a hidden iframe, output a json response to the iframe and then parse the response via javascript.
Related
I made admin in page in order to let the user add main data of page, name, second name, address, image 1(php uploader with thumbs) , image 2(php uploader with thumbs),gallery uploader (php and jquery)
then I faced an issue with multiple tabs and I solved it. in main data
The problem is in the 3 uploaders
Because I used to upload images with its thumbnails with different size, so I have to make it with sessions in order to know where to upload and which is the size
The problem is in multiple tabs issue the sessions are overwritten
So how I can make alias or sessions to be specific in each window but with same name? Is it possible?
N.B: I mean multiple tabs in browser with same sessions name
Do you mean tabs like as in jQuery UI tabs or some other UI library?
If so, because all the data in the tabs are in reality on one page, in one form, if you have more than one image to upload (say one on each tab), you will need to make sure that the data in the form for each of the multiple images is in an array - one element for each image.
You will then need to loop through the array to get the info for the multiple images when you submit the form.
i have a form with a Photo Upload Input. I want the picture to be uploaded before submitting the form to speed up the submit.
the form should be able to upload multiple files and should show a progressbar + preview.
how i can do this?
MetinKale38
You can do this pretty easily now in HTML5 using XMLHttpRequest with a multipart form and the file element. XMLHttpRequest now supports progress events which you can handle in your Javascript code. Here is a link to an excellent article with detail and code examples http://www.matlus.com/html5-file-upload-with-progress.
Note that your PHP code must still treat each file independently, but that is transparent to your JavaScript - it will simply make multiple posts to the server.
I am developing a cart (utilizing OpenCart). The cart allows people to order prints of images. Because the images will be high resolution and therefore large files, I need a method that allows the following:
The customer arrives at a product page,
The customer selects an image for the product,
The file does NOT upload at that time (or, begins uploading in the background),
Without waiting for the file upload, the customer adds the product to the cart,
Repeat steps 1-4 as needed for additional products (and image files),
AFTER successful checkout, the files are uploaded (or, they complete uploading)
It seems the key is to put the files into a queue, and for that queue to persist across page loads until completion of the order.
I'm familiar with PLupload and have found Uploadify, but do not see in their documentation how to accomplish what I'm after.
Can you get me pointed in the right direction? I'm sure this is doable, I'm just unsure how to get started and am unable to find any writeups/documentation around this specific issue.
Thanks!
If you're not using AJAX for all state changes, you can't "remember" a file upload input and repopulate it. (When using AJAX you could hide the forms). You can either let the user upload files right before checkout (not a good practice) or let the user upload in a popup and have the popup use AJAX so you can add forms on the fly as soon as new items are added to the cart.
I'm trying to implement drag-and-drop file selection for uploading files synchronously once the form is submitted. I know how regular file uploading works with HTML and PHP. And I want to be able to process the files in PHP alongside the ones in the $_FILES array.
I've done some research and looked at several plugins but pretty much all of them either upload files once they're dropped into the window or don't use conventional html forms.
Any kind of help like ideas, snippets or plugins would be appreciated.
Thank you!
It is impossible to set the files attribute of a file input via JavaScript for security reasons. See this jsfiddle.
So, you cannot select files for a file input via drag and drop, you have to select the files via the file input directly, by clicking on the 'browse files' button.
What you can do is to implement an onUpload method for the form, to upload the files when the user clicks the submit button, via AJAX. Then, when the uploads are completed, you submit the form with the other data.
See this fiddle to see how to upload files via AJAX. The code has the drag and drop processing and converting binary files into BASE64. You will need to create the AJAX bit by posting the data. To check if the files are done, create a function to be called with setInterval, to check if all the uploads completed.
Cheers,
Apoc
I can upload files from a form using post, but I am trying to find out how to add extra fields to the form i.e File Description, Type and etc.
Also can I upload more than one file at once, I know it says you can't using post in the documentation but are there any work arounds?
Thanks in Advance
In regards to uploading multiple files, are you uploading directly to S3 using POST, or posting to s3 using CURL or a similar lib from your own server?
Why are you adding these extra inputs? If posting directly to S3, you cannot post any inputs that aren't specified as required or optional in the S3 documentation. Any form elements that don't start with "x-ignore-" and aren't required/optional for S3 post upload WILL cause an error to be returned from S3, without uploading your file. If you have elements in the form that can cause this error and they are important to leave in the form before it is submitted (being used as input for an ajax call, etc), then simply append the name of these form elements with "x-ignore-" or delete them from the form.
You have control over a few things, such as the name the file is served with and type by usign the Content-Type and Content-Disposition elements. Take a look at this:
http://developer.amazonwebservices.com/connect/entry.jspa?externalID=1434
You can append your additional information to the "return url" you send alongside your request to Amazon.
Be aware that doing this may expose sensitive information about your app logic to the user in the form of an URL. One thing you can do to avoid/hide this is to capture all GET variables on return, save them, and redirect user to a summary page.
This won't block smarter users form learning your GET variables, but will hide them from 99% of the public.