CODEWITHSUNDEEP
jqueryfile-uploadwebmatrix
mhcodner
mhcodner

Reputation: 563

How can I use jQuery file upload in webmatrix (ASP.NET Web Pages)?

I would like to use this jQuery file upload with my website https://github.com/blueimp/jQuery-File-Upload and according to the documentation I will need to create my own file upload handler and I was wondering if anyone has had any experience with using jQuery file upload in a webmatrix site?

And also, I can't find the info that I need to create my own file upload handler. If anyone can help with that, that would be awesome.

Upvotes: 2

Views: 1092

Answers (2)

Ifeanyi Chukwu
Ifeanyi Chukwu

Reputation: 3327

Blueimp is a painful plugin......i advice you use this plugin for form and file upload. its simpler to configure and very flexible. The problem with blueimp isnt just getting the plugin ready for use. Its also painful on server side both on asp.net mvc and asp.net webmatrix.

Upvotes: 0

mjsr
mjsr

Reputation: 7590

I could help you, I create a file (images) uploader for a website that I create.

CSHTML Part (sube_archivos.cshtml):

@{
    if (IsPost)
    {
        var fileName = Path.GetFileName(Request.Files["archivo"].FileName);
        var fileSavePath = Server.MapPath("~/Temp/" + fileName);
        try
        {
            Request.Files["archivo"].SaveAs(fileSavePath);

            <img src="~/Temp/@fileName" /> @*you could comment this line...it was the succesful response...an image preview*@

        }
        catch (Exception)
        {
            <text>Error en la subida del archivo</text> @*you could comment this line...error in the uploading*@
        }
    }
}

JQUERY/JAVASCRIPT Part:

function sube(archivo) {
  var primer_archivo = archivo.files[0];
  var data = new FormData();
  data.append('archivo', primer_archivo);
  $.ajax({
    url: "@Href("../../operaciones/sube_archivos.cshtml")",
    type: "POST",
    contentType: false,
    data: data,
    processData: false,
    cache: false,
    success: function (response) {

      //here I put the response ....the image preview or the error message
      $(archivo).parent().next('.imagen_cargada').html(response);

      //here I get the file name and I add it to some specific div
      $(archivo).parent().next().next('.nombre_imagen').val($(archivo).val().split('\\').pop());
    }
  });
}

HTML Part:

    <form method="post" enctype="multipart/form-data">
      <input type="file" name="archivo" onchange="sube(this)" />
    </form>

Good luck, tellme if anything is unclear.

Upvotes: 1

Related Questions