Incorrect or missing file Content-type in RadAsyncUpload
Problem
When uploading a file, the content type is null or application/octet-stream.
Example:
When uploading a .pages file from MAC: The content type of the uploaded file is "application/x-iwork-pages-sffpages".
When uploading a .pages file from Windows: The content type of the uploaded file is null or the default for binary files "application/octet-stream".
Description
The explanation for this behavior is the way the browsers decide the content type of the file.**
-
The browser determines the media type of the file based on a hardcoded list of available file extensions and content types - MDN web docs - MIME types.
-
If there are no matches, the browser looks in the registry files of the computer.
-
If no content-type is available for the file extension type, the browser looks in a secondary hard-coded list.
-
Finally, if there are no matched anywhere, the browser puts the default content type, which for a binary file is "application/octet-stream".
The RadAsyncUpload control sets the content type for unknown file extensions to null as the JavaScript drop event does not provide any content type. Here is a sample example that could be used to check the scenario.
function OnClientFileDropped(sender,args) {
var ev = args.get_originalDropEvent();
var contentType = ev.originalEvent.dataTransfer.items[0].getAsFile().type;
console.log("Content type is: " + contentType);
}
function drop_handler(ev) {
var contentType = ev.dataTransfer.items[0].getAsFile().type;
console.log("Content type is: " + contentType);
}
<telerik:RadAsyncUpload ID="RadAsync_FileUpload" RenderMode="Lightweight" OnFileUploaded="RadAsyncUpload1_FileUploaded" OnClientFileDropped="OnClientFileDropped" runat="server" OnFileUploaded=></telerik:RadAsyncUpload>
<input type="file" id="myFile" name="myFile" ondrop="drop_handler(event);" />
The results when tested on Windows for both the RadAsyncUpload and the input are as follows:
-
When uploading a .jpg file: "Content type is: image/jpeg"
-
When uploading a .pages file: "Content type is: "
There are some resources related to the decision of the content type from the browser:
-
is there a work around for Content-type incorrectly sent by Operating System;
-
How is mime type of an uploaded file determined by browser?;
Solution
One possible solution for this is to check the content type in the FileUploaded event, and if it is null or "application/octet-stream" to define it manually based on the file extension from a predefined list with known content types.
protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
{
string contentType = e.File.ContentType;
if (string.IsNullOrEmpty(contentType))
{
contentType = "application/octet-stream";
// or other based on e.File.GetExtension()
//if (e.File.GetExtension() == ".pages")
//{
// contentType = "application/x-iwork-pages-sffpages";
//}
}
}