JSFiddle - React, Tailwind, and code Playground

by ktabarez

HTML

/*
 * WebApi Implementation: Luke Baughan https://github.com/bUKaneer/jQuery-File-Upload
 * based on HttpHandler Implementation: Max Pavlov https://github.com/maxpavlov/jQuery-File-Upload.MVC3
 */
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Web;
using System.Web.Http;
using System.Web.Script.Serialization;

namespace BluImpJqueryFileUploadMVC4.ApiControllers
{
    public class UploadController : ApiController
    {
        private readonly JavaScriptSerializer _js = new JavaScriptSerializer { MaxJsonLength = 41943040 };
        private readonly string _storageRoot = HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["FileUploadPath"]);
        public bool _isReusable { get { return false; } }

        #region Get
        private HttpResponseMessage DownloadFileContent()
        {
            var filename = HttpContext.Current.Request["f"];
            var filePath = _storageRoot + filename;
            if (File.Exists(filePath))
            {
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
                response.Content = new StreamContent(new FileStream(filePath, FileMode.Open, FileAccess.Read));
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
                {
                    FileName = filename
                };
                return response;
            }
            return ControllerContext.Request.CreateErrorResponse(HttpStatusCode.NotFound, "");
        }

        private HttpResponseMessage DownloadFileList()
        {
            var files =
            new DirectoryInfo(_storageRoot)
                .GetFiles("*", SearchOption.TopDirectoryOnly)
 ...

JavaScript

/*
 * jQuery File Upload Plugin JS Example 7.1.1
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

/*jslint nomen: true, unparam: true, regexp: true */
/*global $, window, document */

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: 'api/Upload/',
        maxFileSize: 500000000000000,
        // In order for chunked uploads to work in Mozilla Firefox, 
        // the multipart option has to be set to false. This is due to 
        // the Gecko 2.0 browser engine - used by Firefox 4+ - adding blobs 
        // with an empty filename when building a multipart upload request 
        // using the FormData interface
        //multipart: false,
        maxChunkSize: 10000000, // Defaults to 10 MB 
        beforeSend: function (jqXHR, settings) {
            if (settings.chunkSize) {
                jqXHR.setRequestHeader('X-File-Name', generateFileUniqueIdentifier(settings));
                jqXHR.setRequestHeader('X-Chunk-Index', _getFileIndex(settings));//settings.chunkIndex);
                jqXHR.setRequestHeader('X-Chunks-Number', _getTotalChunks(settings));//settings.chunksNumber);
            }
        },
        // The add callback is invoked as soon as files are added to the fileupload
        // widget (via file input selection, drag & drop or add API call).
        // See the basic file upload widget for more information:
        //add: function (e, data) {
        //    console.log({
        //        msg: 'fileupload.add',
        //        e: e,
        //        data: data,
        //    });
        //},
        ////// Callback for the start of each file upload request:
        //send: function (e, data) {
        //   ...