Загрузка изображений с предпросмотром.

Всем привет! Стоит передо мной такая задача:

Нужно осуществить загрузчик изображений с использованием Drag&Drop, предпросмотром и редактированием. Drag&Drop, предпросмотр и редактирование я в принципе реализовал.

1. Проверяем поддерживает ли браузер FileAPI

Код (Javascript):

1. function checkFileRider() {
2.     if (typeof(window.FileReader) === 'undefined') {
3.         return false;
4.     }
5.     else {
6.         return true;
7.     }
8. }

Соответственно если поддерживает, то выводим блок для загрузки изображений с помощью Drag&Drop, если нет, то input type="file".
2. Создаю миниатюры при помощи Canvas. Мне нужно чтобы миниатюры создавались на клиенте, то есть без загрузки на сервер.

Код (Javascript):

1. var dropZone = $('#photowrap .imageuploader');
2. var loadFiles = [];
3. var image = new Image();
4.  
5. function dropFile() {
6.     dropZone[0].ondrop = function(event) {
7.         event.preventDefault();
8.      
9.         addPreview(event.dataTransfer.files);
10.     };
11. }
12. function addPreview(files) {
13.     if(files.length > 0) {
14.         dropZone.after('<div class="preview" id="preview"></div<');
15.         for(i=0; i<files.length; i++) {
16.             loadFiles.push(files[i]);
17.         }
18.         generatePreview();
19.     }
20. }
21. function generatePreview() {
22.     if (loadFiles.length > 0) {
23.      
24.         var file = loadFiles.pop();
25.      
26.         switch(file.type) {
27.                 case 'image/gif':
28.                 case 'image/jpeg':
29.                 case 'image/png':
30.                 case 'image/tiff':
31.                     var typeError = false;
32.                     break;
33.                 default:
34.                     var typeError = true;
35.             }
36.      
37.         if(typeError) {
38.             $('#preview').append('<div class="preview_item error">Файл '+file.name+' не является изображением!</div>');
39.         }
40.         else {
41.         var canvas = document.createElement('CANVAS');
42.         var ctx = canvas.getContext('2d');
43.         image.src = URL.createObjectURL(file);
44.  
45.         image.onload = function() {
46.             ctx.drawImage(image, 0, 0);
47.         }
48.         $('#preview')..append(canvas);
49.         }
50.         setTimeout(generatePreview, 200);
51.     }
52. }

Ну и соответственно редактирование. Все параметры редактирования (поворот, изменение размера, выделение области и т.п.) записываются в скрытый инпут.
Короче, это все работает.
Осталось последнее: загрузить файлы на сервер.

Как я понял, в input file нельзя отредактировать список файлов для загрузки, так как это не разрешается политикой безопасности браузеров. Остаётся только кодировка изображений в base64? Или есть какое-нибудь ещё решение?

 

Да не то чтобы не нравится просто думал может ещё какие-то решения есть, о которых я не знаю.