Valum file upload - Works in Chrome but not IE, Im

2019-02-20 03:52发布

问题:

I'm using a slightly modified version of Valum's upload [github link], I've modified it to upload to a database but haven't modified the javascript that it is using to get the file into the Request as an InputStream.

The following line of code is failing in IE 8 but is confirmed to work in Chrome.

using (Image imgInput = Image.FromStream(Request.InputStream))

The error received is "Parameter not valid". It appears to be having an issue with the Input Stream being used but it exists/has data (not sure how to validate if the data is good or not).

Anyone have any ideas or are there more details I can include? The same image is able to be used in Chrome and is uploaded appropriately.

Page

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Upload-Pictures</h2>
    <div id="file-uploader">
        <noscript>
            <p>Please enable JavaScript to use file uploader.</p>
         </noscript>
    </div>
    <script src="/Scripts/fileuploader.js" type="text/javascript"></script>
    <script type="text/javascript">
        function createUploader() {
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                action: '/Admin/FileUpload/' + <%= Model.PropertyId %>,
                debug: true
            });
        }
        window.onload = createUploader;
    </script>
</asp:Content>

Controller

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult FileUpload(int id)
    {
        try
        {
            byte[] newImageByteArray = GetByteArrayForResizedImage(350, Request.InputStream);
            byte[] thumbnailByteArray = GetByteArrayForResizedImage(150, Request.InputStream);

           //Add to DB
        }
        catch (Exception ex)
        {
            // This is where the exception is caught
            return Json(new { success = false, message = ex.Message }, "application/json");
        }

        return Json(new { success = true }, "application/json");
    }

    private static byte[] GetByteArrayForResizedImage(int imageSize, Stream inputStream)
    {
        byte[] imageByteArray;

        // For some reason in IE the inputStream here is causing it to crash
        using (Image imgInput = Image.FromStream(inputStream))
        {
           //Image processing
        }

        return imageByteArray;
    }

fileuploader.js - qq.FileUploader

/**
 * Class that creates upload widget with drag-and-drop and file list
 * @inherits qq.FileUploaderBasic
 */
qq.FileUploader = function(o){
    // call parent constructor
    qq.FileUploaderBasic.apply(this, arguments);

    // additional options    
    qq.extend(this._options, {
        element: null,
        // if set, will be used instead of qq-upload-list in template
        listElement: null,

        template: '<div class="qq-uploader">' + 
                '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                '<div class="qq-upload-button">Upload a file</div>' +
                '<ul class="qq-upload-list"></ul>' + 
             '</div>',

        // template for one item in file list
        fileTemplate: '<li>' +
                '<span class="qq-upload-file"></span>' +
            '<span class="qq-upload-spinner"></span>' +
            '<span class="qq-upload-size"></span>' +
            '<a class="qq-upload-cancel" href="#">Cancel</a>' +
            '<span class="qq-upload-failed-text">Failed</span>' +
        '</li>',        

        classes: {
            // used to get elements from templates
            button: 'qq-upload-button',
            drop: 'qq-upload-drop-area',
            dropActive: 'qq-upload-drop-area-active',
            list: 'qq-upload-list',

            file: 'qq-upload-file',
            spinner: 'qq-upload-spinner',
            size: 'qq-upload-size',
            cancel: 'qq-upload-cancel',

            // added to list item when upload completes
            // used in css to hide progress spinner
            success: 'qq-upload-success',
            fail: 'qq-upload-fail'
        }
    });
    // overwrite options with user supplied    
    qq.extend(this._options, o);       

    this._element = this._options.element;
    this._element.innerHTML = this._options.template;        
    this._listElement = this._options.listElement || this._find(this._element, 'list');

    this._classes = this._options.classes;

    this._button = this._createUploadButton(this._find(this._element, 'button'));        

    this._bindCancelEvent();
    this._setupDragDrop();
};

fileuploader.js - qq.FileUploaderBasic

/**
 * Creates upload button, validates upload, but doesn't create file list or dd. 
 */
qq.FileUploaderBasic = function(o){
    this._options = {
        // set to true to see the server response
        debug: false,
        action: '/server/upload',
        params: {},
        button: null,
        multiple: true,
        maxConnections: 3,
        // validation        
        allowedExtensions: [],               
        sizeLimit: 0,   
        minSizeLimit: 0,                             
        // events
        // return false to cancel submit
        onSubmit: function(id, fileName){},
        onProgress: function(id, fileName, loaded, total){},
        onComplete: function(id, fileName, responseJSON){},
        onCancel: function(id, fileName){},
        // messages                
        messages: {
            typeError: "{file} has invalid extension. Only {extensions} are allowed.",
            sizeError: "{file} is too large, maximum file size is {sizeLimit}.",
            minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.",
            emptyError: "{file} is empty, please select files again without it.",
            onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."            
        },
        showMessage: function(message){
            alert(message);
        }               
    };
    qq.extend(this._options, o);

    // number of files being uploaded
    this._filesInProgress = 0;
    this._handler = this._createUploadHandler(); 

    if (this._options.button){ 
        this._button = this._createUploadButton(this._options.button);
    }

    this._preventLeaveInProgress();         
};

回答1:

Turns out that there is not an input stream in the Request when using IE as your browser. Ended up fixing the code by pulling it out of the Files array like this:

if (String.IsNullOrEmpty(Request["qqfile"]))
{ 
    //This works with IE
    HttpPostedFileBase httpPostedFileBase = Request.Files[0] as HttpPostedFileBase;
    byte[] newImageByteArray = GetByteArrayForResizedImage(350, httpPostedFileBase.InputStream);
    byte[] thumbnailByteArray = GetByteArrayForResizedImage(150, httpPostedFileBase.InputStream);

    //Do stuff here

    return Json(new { success = true }, "text/html");
}
else
{
    byte[] newImageByteArray = GetByteArrayForResizedImage(350, Request.InputStream);
    byte[] thumbnailByteArray = GetByteArrayForResizedImage(150, Request.InputStream);

    //Do stuff here

    return Json(new { success = true }, "application/json");
}