Skip to content

Instantly share code, notes, and snippets.

@luiscelismx

luiscelismx/HomeController.cs

Created February 28, 2014 21:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save luiscelismx/9280851 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save luiscelismx/9280851 to your computer and use it in GitHub Desktop.
Download ZIP
Subir archivos y compartir con función arrastrar y soltar en navegador, MVC .Net (C# y jQuery)
Raw
HomeController.cs
/* =============================================
-- Author: Luis Antonio Celis Molina
-- Create date: 05/11/2013
-- Description:
-- =============================================
*/
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace cBox.Controllers
{
public class ViewDataUploadFilesResult
{
public string Name { get; set; }
public int Length { get; set; }
}
public class HomeController : Controller
{
private const string TempPath = @"\\servidor/carpeta";
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)
{
foreach (HttpPostedFileBase file in files)
{
string filePath = Path.Combine(TempPath, file.FileName);
System.IO.File.WriteAllBytes(filePath, ReadData(file.InputStream));
}
return Json("Todos los Archivos fueron correctamente almacenados.");
}
public ActionResult SubirArchivo()
{
List<string> archivos = new List<string>();
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
string savedFileName = Path.Combine(TempPath,
hpf.FileName);
hpf.SaveAs(savedFileName);
archivos.Add(hpf.FileName);
}
return View("Respuesta", archivos);
}
private byte[] ReadData(Stream stream)
{
byte[] buffer = new byte[16 * 1024];
using (MemoryStream ms = new MemoryStream())
{
int read;
while ((read = stream.Read(buffer, 0, buffer.Length)) > 0)
{
ms.Write(buffer, 0, read);
}
return ms.ToArray();
}
}
}
}
Raw
index.cshtml
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
$(function () {
$('#dropbox').filedrop({
url: '@Url.Action("UploadFiles")',
paramname: 'files',
maxFiles: 5,
dragOver: function () {
$('#dropbox').css('background', '#6fb2de');
},
dragLeave: function () {
$('#dropbox').css('background', 'url("themes/base/images/background_tile_3.jpg")');
},
drop: function () {
$('#dropbox').css('background', 'url("themes/base/images/background_tile_3.jpg")');
document.getElementById("mensajes").innerHTML = "Preparando para subir archivo. La transferencia comenzará en breve.";
},
afterAll: function () {
document.getElementById("mensajes").innerHTML = "Archivo(s) subidos correctamente!!!";
},
uploadStarted: function (i, file, len) {
// a file began uploading
// i = index => 0, 1, 2, 3, 4 etc
// file is the actual file of the index
// len = total files user dropped
$('.progress').width('0%');
},
progressUpdated: function (i, file, progress) {
// this function is used for large files and updates intermittently
// progress is the integer value of file being uploaded percentage to completion
// $('#dropbox').html('Subiendo Archivo...');
document.getElementById("mensajes").innerHTML = "Subiendo Archivo " + progress + "%";
$('#dropbox').append('<div class="progressHolder"><div class="progress"></div></div>');
$('.progress').width(progress + '%');
},
uploadFinished: function (i, file, response, time) {
$('#uploadResult').append('<li>' + 'http://midominio.com/' + file.name + '</li>');
document.getElementById("notificacion").innerHTML = "Esta es la liga que debes compartir para que descarguen tu archivo:";
}
});
});
</script>
Raw
jquery.filedrop.js
/*
* Default text - jQuery plugin for html5 dragging files from desktop to browser
*
* Author: Weixi Yen
*
* Email: [Firstname][Lastname]@gmail.com
*
* Copyright (c) 2010 Resopollution
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.github.com/weixiyen/jquery-filedrop
*
* Version: 0.1.0
*
* Features:
* Allows sending of extra parameters with file.
* Works with Firefox 3.6+
* Future-compliant with HTML5 spec (will work with Webkit browsers and IE9)
* Usage:
* See README at project homepage
*
*/
;(function($) {
jQuery.event.props.push("dataTransfer");
var default_opts = {
fallback_id: '',
url: '',
refresh: 1000,
paramname: 'userfile',
maxfiles: 25, // Ignored if queuefiles is set > 0
maxfilesize: 60, // MB file size limit
queuefiles: 0, // Max files before queueing (for large volume uploads)
queuewait: 200, // Queue wait time if full
data: {},
headers: {},
drop: empty,
dragEnter: empty,
dragOver: empty,
dragLeave: empty,
docEnter: empty,
docOver: empty,
docLeave: empty,
beforeEach: empty,
afterAll: empty,
rename: empty,
error: function(err, file, i) {
alert(err);
},
uploadStarted: empty,
uploadFinished: empty,
progressUpdated: empty,
speedUpdated: empty
},
errors = ["Navegador No Soportado", "Demasiados Archivos", "Archivo Demasiado Grande, Si deseas subir un archivo más grande por favor Comunicate con el areá de Sistemas."],
doc_leave_timer, stop_loop = false,
files_count = 0,
files;
$.fn.filedrop = function(options) {
var opts = $.extend({}, default_opts, options);
this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
$(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
$('#' + opts.fallback_id).change(function(e) {
opts.drop(e);
files = e.target.files;
files_count = files.length;
upload();
});
function drop(e) {
opts.drop(e);
files = e.dataTransfer.files;
if (files === null || files === undefined) {
opts.error(errors[0]);
return false;
}
files_count = files.length;
upload();
e.preventDefault();
return false;
}
function getBuilder(filename, filedata, mime, boundary) {
var dashdash = '--',
crlf = '\r\n',
builder = '';
if (opts.data) {
var params = $.param(opts.data).split(/&/);
$.each(params, function() {
var pair = this.split(/=/, 2);
var name = decodeURI(pair[0]);
var val = decodeURI(pair[1]);
builder += dashdash;
builder += boundary;
builder += crlf;
builder += 'Content-Disposition: form-data; name="' + name + '"';
builder += crlf;
builder += crlf;
builder += val;
builder += crlf;
});
}
builder += dashdash;
builder += boundary;
builder += crlf;
builder += 'Content-Disposition: form-data; name="' + opts.paramname + '"';
builder += '; filename="' + filename + '"';
builder += crlf;
builder += 'Content-Type: ' + mime;
builder += crlf;
builder += crlf;
builder += filedata;
builder += crlf;
builder += dashdash;
builder += boundary;
builder += dashdash;
builder += crlf;
return builder;
}
function progress(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
if (this.currentProgress != percentage) {
this.currentProgress = percentage;
opts.progressUpdated(this.index, this.file, this.currentProgress);
var elapsed = new Date().getTime();
var diffTime = elapsed - this.currentStart;
if (diffTime >= opts.refresh) {
var diffData = e.loaded - this.startData;
var speed = diffData / diffTime; // KB per second
opts.speedUpdated(this.index, this.file, speed);
this.startData = e.loaded;
this.currentStart = elapsed;
}
}
}
}
// Respond to an upload
function upload() {
stop_loop = false;
if (!files) {
opts.error(errors[0]);
return false;
}
var filesDone = 0,
filesRejected = 0;
if (files_count > opts.maxfiles && opts.queuefiles === 0) {
opts.error(errors[1]);
return false;
}
// Define queues to manage upload process
var workQueue = [];
var processingQueue = [];
var doneQueue = [];
// Add everything to the workQueue
for (var i = 0; i < files_count; i++) {
workQueue.push(i);
}
// Helper function to enable pause of processing to wait
// for in process queue to complete
var pause = function(timeout) {
setTimeout(process, timeout);
return;
}
// Process an upload, recursive
var process = function() {
var fileIndex;
if (stop_loop) return false;
// Check to see if are in queue mode
if (opts.queuefiles > 0 && processingQueue.length >= opts.queuefiles) {
return pause(opts.queuewait);
} else {
// Take first thing off work queue
fileIndex = workQueue[0];
workQueue.splice(0, 1);
// Add to processing queue
processingQueue.push(fileIndex);
}
try {
if (beforeEach(files[fileIndex]) != false) {
if (fileIndex === files_count) return;
var reader = new FileReader(),
max_file_size = 1048576 * opts.maxfilesize;
reader.index = fileIndex;
if (files[fileIndex].size > max_file_size) {
opts.error(errors[2], files[fileIndex], fileIndex);
// Remove from queue
processingQueue.forEach(function(value, key) {
if (value === fileIndex) processingQueue.splice(key, 1);
});
filesRejected++;
return true;
}
reader.onloadend = send;
reader.readAsBinaryString(files[fileIndex]);
} else {
filesRejected++;
}
} catch (err) {
// Remove from queue
processingQueue.forEach(function(value, key) {
if (value === fileIndex) processingQueue.splice(key, 1);
});
opts.error(errors[0]);
return false;
}
// If we still have work to do,
if (workQueue.length > 0) {
process();
}
};
var send = function(e) {
var fileIndex = ((typeof(e.srcElement) === "undefined") ? e.target : e.srcElement).index
// Sometimes the index is not attached to the
// event object. Find it by size. Hack for sure.
if (e.target.index == undefined) {
e.target.index = getIndexBySize(e.total);
}
var xhr = new XMLHttpRequest(),
upload = xhr.upload,
file = files[e.target.index],
index = e.target.index,
start_time = new Date().getTime(),
boundary = '------multipartformboundary' + (new Date).getTime(),
builder;
newName = rename(file.name);
mime = file.type
if (typeof newName === "string") {
builder = getBuilder(newName, e.target.result, mime, boundary);
} else {
builder = getBuilder(file.name, e.target.result, mime, boundary);
}
upload.index = index;
upload.file = file;
upload.downloadStartTime = start_time;
upload.currentStart = start_time;
upload.currentProgress = 0;
upload.startData = 0;
upload.addEventListener("progress", progress, false);
xhr.open("POST", opts.url, true);
xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
// Add headers
$.each(opts.headers, function(k, v) {
xhr.setRequestHeader(k, v);
});
xhr.sendAsBinary(builder);
opts.uploadStarted(index, file, files_count);
xhr.onload = function() {
if (xhr.responseText) {
var now = new Date().getTime(),
timeDiff = now - start_time,
result = opts.uploadFinished(index, file, jQuery.parseJSON(xhr.responseText), timeDiff, xhr);
filesDone++;
// Remove from processing queue
processingQueue.forEach(function(value, key) {
if (value === fileIndex) processingQueue.splice(key, 1);
});
// Add to donequeue
doneQueue.push(fileIndex);
if (filesDone == files_count - filesRejected) {
afterAll();
}
if (result === false) stop_loop = true;
}
};
}
// Initiate the processing loop
process();
}
function getIndexBySize(size) {
for (var i = 0; i < files_count; i++) {
if (files[i].size == size) {
return i;
}
}
return undefined;
}
function rename(name) {
return opts.rename(name);
}
function beforeEach(file) {
return opts.beforeEach(file);
}
function afterAll() {
return opts.afterAll();
}
function dragEnter(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.dragEnter(e);
}
function dragOver(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.docOver(e);
opts.dragOver(e);
}
function dragLeave(e) {
clearTimeout(doc_leave_timer);
opts.dragLeave(e);
e.stopPropagation();
}
function docDrop(e) {
e.preventDefault();
opts.docLeave(e);
return false;
}
function docEnter(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.docEnter(e);
return false;
}
function docOver(e) {
clearTimeout(doc_leave_timer);
e.preventDefault();
opts.docOver(e);
return false;
}
function docLeave(e) {
doc_leave_timer = setTimeout(function() {
opts.docLeave(e);
}, 200);
}
};
function empty() {}
try {
if (XMLHttpRequest.prototype.sendAsBinary) return;
XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
function byteValue(x) {
return x.charCodeAt(0) & 0xff;
}
var ords = Array.prototype.map.call(datastr, byteValue);
var ui8a = new Uint8Array(ords);
this.send(ui8a.buffer);
}
} catch (e) {}
})(jQuery);
Raw
Respuesta.cshtml
@{
ViewBag.Title = "Respuesta";
}
<header>
<h1>cBox</h1>
<h2>Comparte los archivos que necesites de manera fácil y rápida.</h2>
</header>
<div>
<h3>Archivo(s) subido(s) correctamente, esta es la liga que tienes que compartir:</h3><br /><br />
<ul>
@foreach (string a in this.ViewData.Model)
{
<li>http://midominio.com/@a</li>
}
</ul>
</div>
<br />
<a href="/">Subir otro archivo</a>
<footer>
<h2>cBox by Luis Celis Molina</h2>
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment