BlueImp fileupload jquery widget Some coding techniques...
Quote from dar on 17/05/2020, 21:47I just now got a file upload to work on a MS Core 3.1 ASP.NET C# project. This might not seem so hard for some, however, for me the result is below, note my journey was thus, other peoples can be different:
- For a minimal File upload experience to occur (as opposed to the all singing dancing version fileupload can be made to do) see my instructions below.
- Git hub project page for file upload can be found here.
- Take a Zip clone.
<script src="~/js/jquery.ui.widget.js"></script> <script src="~/js/jquery.iframe-transport.js"></script> <script src="~/js/jquery.fileupload.js"></script>Move these these three files from the js directory in the zip to the js directory under wwwroot in your MS Core project. Note the order they are placed in the _Layout file is important. As shown here. Place them just above the clsoing </body> tag. Again! this is important. the fileupload feature shall not work if you do not do this in the right order or place.
<input id="SmallFileUpload" type="file" name="file" accept="image/png, image/jpeg" data-url="/Dashboard/_UploadBrandingSmall" data-sequential-uploads="true" data-form-data='{"script": "true"}'>- The input above is the one I used. Note / there is no "multiple" attribute, and the "files[]" is just "file" in name. This is because I do not want to load more than one file. The call to the Controller is "/Dashboard/_UploadBrandingSmall" and the procedure is as below...
public ActionResult _UploadBrandingSmall(IFormFile file) { try { if (file != null) { string lsType = "af_sSmallBrandingImage"; var lsFilePath = System.IO.Path.GetTempFileName(); System.IO.File.WriteAllBytes(lsFilePath, Aubitforecast.Library.Classes.Utility.StreamToBytes(file.OpenReadStream())); byte[] laBytes = System.IO.File.ReadAllBytes(lsFilePath); this.Request.HttpContext.Session.SetString(lsType, string.Format("data:image/jpeg;base64,{0}", Convert.ToBase64String(laBytes))); } } catch (Exception loException) { Aubitforecast.Library.Classes.Utility.MakeExceptionMessage(loException, "\r\n", "_UploadBranding"); } return this.Content(string.Empty); }You shall note that the IFormFile file parameter in the routine name area relates to name="file" in point 6.
- This uploads the image (in this case) to a Session variable which is accessed immediately the upload is complete to place it into form data onto a div using this declaration: <div id="divImgData" data-s='' data-l=''>
</div> $("#SmallFileUpload").fileupload({ done: function (e, data) { $.ajax({ url: '@Url.Content("~/Dashboard/_GetBrandingImageData")', type: 'GET', success: function (oData) { af_wShowMessage("aea", "@loLocalizer["Upload"]...@loLocalizer["Success"]", "alert-success", null, @Aubitforecast.Library.Classes.Constants._nMaxWindowTimeout); if (oData.bResult) { if (oData._sSmall.length > 0) { $("#SmallImage").attr("src", oData._sSmall); $("#divImgData").data("s", oData._sSmall); } else { $("#SmallImage").attr("src", ""); $("#divImgData").data("s", ""); } if (oData._sLarge.length > 0) { $("#LargeImage").attr("src", oData._sLarge); $("#divImgData").data("l", oData._sLarge); } else { $("#LargeImage").attr("src", ""); $("#divImgData").data("l", ""); } } } }); } });The above is the ajax call on completion of upload.
- When the screen is saved the data in Base64 image format is sent to the controller to be stored with all the other information on the screen.
All for now, and one for all.
David
I just now got a file upload to work on a MS Core 3.1 ASP.NET C# project. This might not seem so hard for some, however, for me the result is below, note my journey was thus, other peoples can be different:
- For a minimal File upload experience to occur (as opposed to the all singing dancing version fileupload can be made to do) see my instructions below.
- Git hub project page for file upload can be found here.
- Take a Zip clone.
-
<script src="~/js/jquery.ui.widget.js"></script> <script src="~/js/jquery.iframe-transport.js"></script> <script src="~/js/jquery.fileupload.js"></script>
Move these these three files from the js directory in the zip to the js directory under wwwroot in your MS Core project. Note the order they are placed in the _Layout file is important. As shown here. Place them just above the clsoing </body> tag. Again! this is important. the fileupload feature shall not work if you do not do this in the right order or place.
-
<input id="SmallFileUpload" type="file" name="file" accept="image/png, image/jpeg" data-url="/Dashboard/_UploadBrandingSmall" data-sequential-uploads="true" data-form-data='{"script": "true"}'>
- The input above is the one I used. Note / there is no "multiple" attribute, and the "files[]" is just "file" in name. This is because I do not want to load more than one file. The call to the Controller is "/Dashboard/_UploadBrandingSmall" and the procedure is as below...
-
public ActionResult _UploadBrandingSmall(IFormFile file) { try { if (file != null) { string lsType = "af_sSmallBrandingImage"; var lsFilePath = System.IO.Path.GetTempFileName(); System.IO.File.WriteAllBytes(lsFilePath, Aubitforecast.Library.Classes.Utility.StreamToBytes(file.OpenReadStream())); byte[] laBytes = System.IO.File.ReadAllBytes(lsFilePath); this.Request.HttpContext.Session.SetString(lsType, string.Format("data:image/jpeg;base64,{0}", Convert.ToBase64String(laBytes))); } } catch (Exception loException) { Aubitforecast.Library.Classes.Utility.MakeExceptionMessage(loException, "\r\n", "_UploadBranding"); } return this.Content(string.Empty); }
You shall note that the IFormFile file parameter in the routine name area relates to name="file" in point 6.
- This uploads the image (in this case) to a Session variable which is accessed immediately the upload is complete to place it into form data onto a div using this declaration: <div id="divImgData" data-s='' data-l=''>
</div> -
$("#SmallFileUpload").fileupload({ done: function (e, data) { $.ajax({ url: '@Url.Content("~/Dashboard/_GetBrandingImageData")', type: 'GET', success: function (oData) { af_wShowMessage("aea", "@loLocalizer["Upload"]...@loLocalizer["Success"]", "alert-success", null, @Aubitforecast.Library.Classes.Constants._nMaxWindowTimeout); if (oData.bResult) { if (oData._sSmall.length > 0) { $("#SmallImage").attr("src", oData._sSmall); $("#divImgData").data("s", oData._sSmall); } else { $("#SmallImage").attr("src", ""); $("#divImgData").data("s", ""); } if (oData._sLarge.length > 0) { $("#LargeImage").attr("src", oData._sLarge); $("#divImgData").data("l", oData._sLarge); } else { $("#LargeImage").attr("src", ""); $("#divImgData").data("l", ""); } } } }); } });
The above is the ajax call on completion of upload.
- When the screen is saved the data in Base64 image format is sent to the controller to be stored with all the other information on the screen.
All for now, and one for all.
David