Uploading Large Amount of Images
Modern JavaScript is powerful enough to process large volumes of data. However when it comes to really serious amounts of files or sizes (say, a couple of thousand files), you may find out that it works quite slowly or unstable. How to handle this?
Avoid settings that cause HTML5 Uploader reading files before the upload
Under certain circumstances, the uploader has to read and parse the file before adding it to the upload list. It may work fine when you have few dozens of files, but if you have thousands of files, it may become annoying.
What kind of settings you should avoid for large amounts?
- Image dimension and color space restrictions
- EXIF-based settings (such as EnableAutoRotation and EnableExifPreview)
- Displaying thumbnails in the upload pane
If you use these settings, the uploader will load files as fast as possible:
<aur:ImageUploaderFlash ID="Uploader1" runat="server" EnableAutoRotation="False" EnableExifPreview="False">
<Restrictions EnableCmyk="True" MinImageWidth="0" MinImageHeight="0" MaxImageWidth="0" MaxImageHeight="0" />
<UploadPane ViewMode="Icons" />
</aur:ImageUploaderFlash>
$uploader = new ImageUploaderFlash("Uploader1");
$uploader->setEnableAutoRotation(false);
$uploader->setEnableExifPreview(false);
$uploader->getRestrictions()->setMinImageWidth("0");
$uploader->getRestrictions()->setMinImageHeight("0");
$uploader->getRestrictions()->setMaxImageWidth("0");
$uploader->getRestrictions()->setMaxImageHeight("0");
$uploader->getRestrictions()->setEnableCmyk(true);
$uploader->getUploadPane()->setViewMode("Icons");
$uploader->render();
var fu = $au.imageUploaderFlash({
id: 'Uploader1',
enableAutoRotation: false,
enableExifPreview: false,
restrictions: {
minImageWidth: "0",
minImageHeight: "0",
maxImageWidth: "0",
maxImageHeight: "0",
enableCmyk: "true",
},
uploadPane: {
viewMode: "Icons"
}
});
fu.writeHtml();
Selecting large amount of files
It is recommended to instruct your users selecting that many files through drag-and-drop, otherwise they may encounter with browser limitations of a max number of files that may be selected through the Open File Dialog (may vary for different browsers). Another good option is using folder selection.
Flash uploader specific information
Adobe Flash Player has the following peculiarities about files handling:
- To get some information from a file this file has to be loaded to memory.
- File being once loaded to memory cannot be unloaded.
- Adobe Flash Player has access to the limited amount of memory.
These limitations affect uploading images most of all, because performing image-specific operations (creating thumbnails, obtaining image dimensions and metadata, and etc.) requires to load image files to memory.
Working on Flash Uploader we have found that thumbnails in upload pane can be created for about 200 user-selected 8Mpix photos, whereas creating more thumbnails causes the "out of memory" problem. Thus, Flash Uploader has a mechanism preventing it from running out of memory. The mechanism logic is rather simple: if Adobe Flash Player is about to consume all available memory, Flash Uploader stops creating thumbnails and displays the remaining image files as icons.
So, if a user selects to upload more images than Adobe Flash Player can keep in memory, some of these images will be shown as icons in the upload pane. To prevent this from happening you can use one of the following approaches:
- Restrict maximum total size of files selected to upload. This way is suitable if you expect that not more than 200 photos of the average size will be uploaded per one upload session.
- Set
Iconsview mode. This approach works better if your application requires uploading large amount of images at once.
If you set MaxImageHeight, MaxImageWidth, MinImageHeight, or MinImageWidth restrictions Flash Uploader automatically sets the MaxTotalFileSize property equal to 250 Megabytes.
Restricting Maximum Total Size of Files Selected to Upload
This approach offers you to configure Flash Uploader in such way that users cannot select more files than Adobe Flash Player is able to handle. Thus, you can be sure that all user-selected images will be shown as thumbnails in the Upload Pane, if the other is not set by the ViewMode property. Use the MaxTotalFileSize property to specify maximum total size of files selected to upload.
The following configuration sets the MaxTotalFileSize property to 200 Megabytes:
<aur:ImageUploaderFlash ID="Uploader1" runat="server" >
<Restrictions MaxTotalFileSize="209715200" />
</aur:ImageUploaderFlash>
$uploader = new ImageUploaderFlash("Uploader1");
$uploader->getRestrictions()->setMaxTotalFileSize("209715200");
$uploader->render();
var fu = $au.imageUploaderFlash({
id: 'Uploader1',
restrictions: { maxTotalFileSize: "209715200"},
});
fu.writeHtml();
Setting Icons View Mode
In this case all files in Upload Pane will be shown as icons. As a result there will be no need to load selected files to memory. So, no additional limitations should be set and no thumbnails/icons mix will happen. To utilize this approach set the ViewMode property to Icons as it is shown in the following sample:
<aur:ImageUploaderFlash ID="Uploader1" runat="server" >
<UploadPane ViewMode="Icons" />
</aur:ImageUploaderFlash>
$uploader = new ImageUploaderFlash("Uploader1");
$uploader->getUploadPane()->setViewMode("Icons");
$uploader->render();
var fu = $au.imageUploaderFlash({
id: 'Uploader1',
uploadPane: { viewMode: "Icons"},
});
fu.writeHtml();