Upload in Background
Dreamweaver Extension for MX and later versions
It is often necessary to allow visitors to upload a picture or a document, such as a resume, as an attachment to a form.
Uploading a file can be a lengthy procedure, even more so if we only allow to start the upload once the form is completed. Upload in Background allows forms to be more dynamic and fast in their sending to the server, uploading the files attached by the user while he or she is completing the rest of the form.
Upload in Background allows to select a folder where the uploaded files will be copied, as well as to define the extensions of acceptable files.
When an upload to a server is successfully finalized, in case of a picture, the file selection box will be replaced by that picture's thumbnail. In case it is not an image, the selection box will be replaced by the link to the file in question.
Upload in Background is distributed as an extension for Adobe Dreamweaver MX or later (UploadinBackground.mxp). The upload action is implemented in PHP script.
The requirements for Upload in Background are as follows:
- Adobe Dreamweaver MX or later (including MX 2004, DW 8, DW CS3, DW CS4, DW CS5, DW CS6, ...).
- PHP script on the server where the website is hosted
- A folder with writing permissions for the upload of files selected by users
- The form that will include the Upload in Background extension require submit its data to a php file.
- In the file tag to upload in background the "id" and "name" attribute values must be equals.
Select images and/or files (will be uploaded to this web site in background). Max size: 2MB.
Allowed extensions for this sample: JPG, GIF, PNG, PDF, DOC, PPT, PPS, XLS (you can configure your own allowed extensions).
Please, check this Upload in Background Demo (Animated Flash/Video)
You can find more about in our Upload in Background - FAQ.
Upload in Background is distributed as an extension for Adobe Dreamweaver MX and later versions, packed as a file named Uploadinbackground.mxp.
To install the extension, Adobe Extension Manager software must be used.
Once the extension is installed, it can be accessed, after restarting Dreamweaver, via the menu option "Insert > Form > Upload in Background", or through "InsertBar > Forms Tag > Upload in Background."
To use Upload in Background on a webpage being developed with Dreamweaver, you will have to:
1 - Save the webpage where Upload in Background will be used;
2 - Select the input file types that you wish to upload in background.
By executing the extension Upload in Background (See how to access Upload in Background under "Installation"), a setup window will appear, which is necessary for the correct functioning of the extension.
The fields of the setup window (Fig 1), are:
Select Directory for Upload: Select, inside your website, a folder with a writing permission. This is where the files will be uploaded to.
Allowed file extensions: Define the kinds of files that you will allow to upload in background. When you press Add Extension, the selected file extension will be added to the list of acceptable extensions. Use Delete Extension to undo that selection and to remove a file extension from the list of allowed extensions.
Upload in Background has an area in the lower part that gives help hints to the user; the hints appear simultaneously during the setup process.
The directory Jscript, together with the file that it contains, must be published together with your website at the same location relative to the webpage that contains an Upload in Background.
Some php code lines will be inserted in the header of the php file that will handle the form data. These will include fileHandle.php, which, as its name indicates, handles the files sent through the form.
Using Upload in Background you don't need to handle the files sent through the form. The files sent from the form are captured by Upload in Background and saved in a previously selected folder. (UploadinBakground guarantees that files with the same name will not get overwritten).
Upload in Background, in the process of capturing the files sent from the form, replaces the variables, transported by the files, by new variables with the same name, with the value equal to the path in the server where each file was saved (These paths are relative to the website root).