").addClass(FILEUPLOADER_CONTAINER_CLASS).appendTo($wrapper);
this._$content = $("
").addClass(FILEUPLOADER_CONTENT_CLASS).appendTo($container)
},
_clean: function() {
this._$fileInput.detach();
delete this._$filesContainer;
if (this._files) {
this._files.forEach(function(file) {
file.$file = null;
file.$statusMessage = null
})
}
this.callBase.apply(this, arguments)
},
_uploadFiles: function() {
if (isFormDataSupported()) {
each(this._files, function(_, file) {
this._uploadFile(file)
}.bind(this))
}
},
_uploadFile: function(file) {
this._uploadStrategy.upload(file)
},
_updateProgressBar: function(file, loadedFileData) {
file.progressBar && file.progressBar.option({
value: loadedFileData.loaded,
showStatus: true
});
this._progressAction({
file: file.value,
segmentSize: loadedFileData.currentSegmentSize,
bytesLoaded: loadedFileData.loaded,
bytesTotal: loadedFileData.total,
event: loadedFileData.event,
request: file.request
})
},
_updateTotalProgress: function(totalFilesSize, totalLoadedFilesSize) {
var progress = totalFilesSize ? Math.round(totalLoadedFilesSize / totalFilesSize * 100) : 0;
this.option("progress", progress);
this._setLoadedSize(totalLoadedFilesSize)
},
_initStatusMessage: function(file) {
file.$statusMessage.css("display", "none")
},
_initCancelButton: function(file) {
file.cancelButton.option("onClick", function() {
this._preventFilesUploading([file]);
this._removeFile(file)
}.bind(this));
var hideCancelButton = function() {
setTimeout(function() {
file.cancelButton.option({
visible: false
})
}, FILEUPLOADER_AFTER_LOAD_DELAY)
};
file.onLoad.add(hideCancelButton);
file.onError.add(hideCancelButton)
},
_createProgressBar: function(fileSize) {
return this._createComponent($("
"), ProgressBar, {
value: void 0,
min: 0,
max: fileSize,
statusFormat: function(ratio) {
return Math.round(100 * ratio) + "%"
},
showStatus: false,
statusPosition: "right"
})
},
_getTotalFilesSize: function() {
if (!this._totalFilesSize) {
this._totalFilesSize = 0;
each(this._files, function(_, file) {
this._totalFilesSize += file.value.size
}.bind(this))
}
return this._totalFilesSize
},
_getTotalLoadedFilesSize: function() {
if (!this._totalLoadedFilesSize) {
this._totalLoadedFilesSize = 0;
each(this._files, function(_, file) {
this._totalLoadedFilesSize += file.loadedSize
}.bind(this))
}
return this._totalLoadedFilesSize
},
_setLoadedSize: function(value) {
this._totalLoadedFilesSize = value
},
_recalculateProgress: function() {
this._totalFilesSize = 0;
this._totalLoadedFilesSize = 0;
this._updateTotalProgress(this._getTotalFilesSize(), this._getTotalLoadedFilesSize())
},
_getValidationMessageTarget: function() {
return this._$inputWrapper
},
_optionChanged: function(args) {
var value = args.value;
switch (args.name) {
case "height":
case "width":
this._updateFileNameMaxWidth();
this.callBase(args);
break;
case "value":
!value.length && this._$fileInput.val("");
if (!this._preventRecreatingFiles) {
this._createFiles();
this._renderFiles()
}
this._recalculateProgress();
this.callBase(args);
break;
case "name":
this._initFileInput();
this.callBase(args);
break;
case "accept":
this._initFileInput();
break;
case "multiple":
this._initFileInput();
if (!args.value) {
this.reset()
}
break;
case "selectButtonText":
this._selectButton.option("text", value);
break;
case "uploadButtonText":
this._uploadButton && this._uploadButton.option("text", value);
break;
case "_uploadButtonType":
this._uploadButton && this._uploadButton.option("type", value);
break;
case "maxFileSize":
case "minFileSize":
case "allowedFileExtensions":
case "invalidFileExtensionMessage":
case "invalidMaxFileSizeMessage":
case "invalidMinFileSizeMessage":
case "readyToUploadMessage":
case "uploadedMessage":
case "uploadFailedMessage":
this._invalidate();
break;
case "labelText":
this._$inputLabel.text(value);
break;
case "showFileList":
if (!this._preventRecreatingFiles) {
this._renderFiles()
}
break;
case "chunkSize":
this._setUploadStrategy();
break;
case "uploadUrl":
case "progress":
case "uploadMethod":
case "uploadHeaders":
case "extendSelection":
break;
case "allowCanceling":
case "uploadMode":
this.reset();
this._invalidate();
break;
case "onUploadStarted":
this._createUploadStartedAction();
break;
case "onUploaded":
this._createUploadedAction();
break;
case "onProgress":
this._createProgressAction();
break;
case "onUploadError":
this._createUploadErrorAction();
break;
case "onUploadAborted":
this._createUploadAbortedAction();
break;
case "useNativeInputClick":
this._renderInput();
break;
case "useDragOver":
this._renderDragEvents();
break;
case "nativeDropSupported":
this._invalidate();
break;
default:
this.callBase(args)
}
},
reset: function() {
this.option("value", [])
}
});
var FileBlobReader = Class.inherit({
ctor: function(file, chunkSize) {
this.file = file;
this.chunkSize = chunkSize;
this.index = 0
},
read: function() {
if (!this.file) {
return null
}
var result = this.createBlobResult(this.file, this.index, this.chunkSize);
if (result.isCompleted) {
this.file = null
}
this.index++;
return result
},
createBlobResult: function(file, index, chunkSize) {
var currentPosition = index * chunkSize;
return {
blob: this.sliceFile(file, currentPosition, chunkSize),
index: index,
isCompleted: currentPosition + chunkSize >= file.size
}
},
sliceFile: function(file, startPos, length) {
if (file.slice) {
return file.slice(startPos, startPos + length)
}
if (file.webkitSlice) {
return file.webkitSlice(startPos, startPos + length)
}
return null
}
});
var FileUploadStrategyBase = Class.inherit({
ctor: function(fileUploader) {
this.fileUploader = fileUploader
},
upload: function(file) {
if (file.isValid() && !file.uploadStarted) {
this._prepareFileBeforeUpload(file);
this._uploadCore(file)
}
},
_uploadCore: function(file) {},
_prepareFileBeforeUpload: function(file) {
if (file.$file) {
this.fileUploader._createFileProgressBar(file)
}
file.onLoadStart.add(this._onUploadStarted.bind(this, file));
file.onLoad.add(this._onLoadedHandler.bind(this, file));
file.onError.add(this._onErrorHandler.bind(this, file));
file.onAbort.add(this._onAbortHandler.bind(this, file));
file.onProgress.add(this._onProgressHandler.bind(this, file))
},
_isStatusError: function(status) {
return 400 <= status && status < 500 || 500 <= status && status < 600
},
_onUploadStarted: function(file, e) {
file.uploadStarted = true;
this.fileUploader._uploadStartedAction({
file: file.value,
event: e,
request: file.request
})
},
_onAbortHandler: function(file, e) {
this.fileUploader._uploadAbortedAction({
file: file.value,
event: e,
request: file.request
})
},
_onErrorHandler: function(file, e) {
this.fileUploader._setStatusMessage(file, "uploadFailedMessage");
this.fileUploader._uploadErrorAction({
file: file.value,
event: e,
request: file.request
})
},
_onLoadedHandler: function(file, e) {
this.fileUploader._setStatusMessage(file, "uploadedMessage");
this.fileUploader._uploadedAction({
file: file.value,
event: e,
request: file.request
})
},
_onProgressHandler: function(file, e) {
if (file) {
var totalFilesSize = this.fileUploader._getTotalFilesSize();
var totalLoadedFilesSize = this.fileUploader._getTotalLoadedFilesSize();
var loadedSize = Math.min(e.loaded, file.value.size);
var segmentSize = loadedSize - file.loadedSize;
file.loadedSize = loadedSize;
this.fileUploader._updateTotalProgress(totalFilesSize, totalLoadedFilesSize + segmentSize);
this.fileUploader._updateProgressBar(file, this._getLoadedData(loadedSize, e.total, segmentSize, e))
}
},
_getLoadedData: function(loaded, total, currentSegmentSize, event) {
return {
loaded: loaded,
total: total,
currentSegmentSize: currentSegmentSize
}
}
});
var ChunksFileUploadStrategy = FileUploadStrategyBase.inherit({
ctor: function(fileUploader) {
this.callBase(fileUploader);
this.chunkSize = this.fileUploader.option("chunkSize")
},
_uploadCore: function(file) {
var realFile = file.value;
this._sendChunk(file, {
name: realFile.name,
loadedBytes: 0,
type: realFile.type,
blobReader: new FileBlobReader(realFile, this.chunkSize),
guid: new Guid,
fileSize: realFile.size,
count: Math.ceil(realFile.size / this.chunkSize)
})
},
_sendChunk: function(file, chunksData) {
var chunk = chunksData.blobReader.read();
if (chunk) {
chunksData.loadedBytes += chunk.blob.size;
ajax.sendRequest({
url: this.fileUploader.option("uploadUrl"),
method: this.fileUploader.option("uploadMethod"),
headers: this.fileUploader.option("uploadHeaders"),
beforeSend: function(xhr) {
file.request = xhr
},
upload: {
onloadstart: function() {
if (!file.isStartLoad) {
file.isStartLoad = true;
file.onLoadStart.fire()
}
},
onabort: function() {
file.onAbort.fire()
}
},
data: this._createFormData({
fileName: chunksData.name,
blobName: this.fileUploader.option("name"),
blob: chunk.blob,
index: chunk.index,
count: chunksData.count,
type: chunksData.type,
guid: chunksData.guid,
size: chunksData.fileSize
})
}).done(function() {
file.onProgress.fire({
loaded: chunksData.loadedBytes,
total: file.value.size
});
if (chunk.isCompleted) {
file.onLoad.fire()
}
this._sendChunk(file, chunksData)
}.bind(this)).fail(function(e) {
if (this._isStatusError(e.status)) {
file._isError = true;
file.onError.fire()
}
}.bind(this))
}
},
_createFormData: function(options) {
var formData = new window.FormData;
formData.append(options.blobName, options.blob);
formData.append(FILEUPLOADER_CHUNK_META_DATA_NAME, JSON.stringify({
FileName: options.fileName,
Index: options.index,
TotalCount: options.count,
FileSize: options.size,
FileType: options.type,
FileGuid: options.guid
}));
return formData
},
_getEvent: function(e) {
return null
}
});
var WholeFileUploadStrategy = FileUploadStrategyBase.inherit({
_uploadCore: function(file) {
file.loadedSize = 0;
ajax.sendRequest({
url: this.fileUploader.option("uploadUrl"),
method: this.fileUploader.option("uploadMethod"),
headers: this.fileUploader.option("uploadHeaders"),
beforeSend: function(xhr) {
file.request = xhr
},
upload: {
onprogress: function(e) {
if (file._isError) {
return
}
file._isProgressStarted = true;
file.onProgress.fire(e)
},
onloadstart: function() {
file.onLoadStart.fire()
},
onabort: function() {
file.onAbort.fire()
}
},
data: this._createFormData(this.fileUploader.option("name"), file.value)
}).done(function() {
file.onLoad.fire()
}).fail(function(e) {
if (this._isStatusError(e.status) || !file._isProgressStarted) {
file._isError = true;
file.onError.fire()
}
}.bind(this))
},
_createFormData: function(fieldName, fieldValue) {
var formData = new window.FormData;
formData.append(fieldName, fieldValue);
return formData
},
_getLoadedData: function(loaded, total, segmentSize, event) {
var result = this.callBase(loaded, total, segmentSize, event);
result.event = event;
return result
}
});
registerComponent("dxFileUploader", FileUploader);
module.exports = FileUploader;
module.exports.default = module.exports;