logo
Tags down

shadow

The old file get remove from jQuery fileupload control


By : Sam Purple
Date : October 14 2020, 02:15 PM
around this issue According to your question, you want manipulate the files property of elements with type="file".
code :
$("#files")[0].files
document.getElementById('files').files;
var title = "";
$("#imgList>li").each(function(){
    title += `${$(this).find(".FileNameCaptionStyle").text()}\n`;
});
$("#files").attr("title", title);
//I added event handler for the file upload control to access the files properties.
document.addEventListener("DOMContentLoaded", init, false);

//To save an array of attachments 
var AttachmentArray = [];

//counter for attachment array
var arrCounter = 0;

//to make sure the error message for number of files will be shown only one time.
var filesCounterAlertStatus = false;

//un ordered list to keep attachments thumbnails
var ul = document.createElement('ul');
ul.className = ("thumb-Images");
ul.id = "imgList";

function init() {
    //add javascript handlers for the file upload event
    document.querySelector('#files').addEventListener('change', handleFileSelect, false);
}

//the handler for file upload event
function handleFileSelect(e) {
    //to make sure the user select file/files
    if (!e.target.files) return;

    //To obtaine a File reference
    var files = e.target.files;

    // Loop through the FileList and then to render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        //instantiate a FileReader object to read its contents into memory
        var fileReader = new FileReader();

        // Closure to capture the file information and apply validation.
        fileReader.onload = (function(readerEvt) {
            return function(e) {

                //Apply the validation rules for attachments upload
                ApplyFileValidationRules(readerEvt)

                //Render attachments thumbnails.
                RenderThumbnail(e, readerEvt);

                //Fill the array of attachment
                FillAttachmentArray(e, readerEvt)
            };
        })(f);

        // Read in the image file as a data URL.
        // readAsDataURL: The result property will contain the file/blob's data encoded as a data URL.
        // More info about Data URI scheme https://en.wikipedia.org/wiki/Data_URI_scheme
        fileReader.readAsDataURL(f);
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
}

//To remove attachment once user click on x button
jQuery(function($) {

    $('#Filelist').on('click', '.img-wrap .close', function() {
        var id = $(this).closest('.img-wrap').find('img').data('id');
        //to remove the deleted item from array
        var elementPos = AttachmentArray.map(function(x) {
            return x.FileName;
        }).indexOf(id);
        if (elementPos !== -1) {
            AttachmentArray.splice(elementPos, 1);
        }

        //to remove image tag
        $(this).parent().find('img').not().remove();

        //to remove div tag that contain the image
        $(this).parent().find('div').not().remove();

        //to remove div tag that contain caption name
        $(this).parent().parent().find('div').not().remove();

        //to remove li tag
        var lis = document.querySelectorAll('#imgList li');
        for (var i = 0; li = lis[i]; i++) {
            if (li.innerHTML == "") {
                li.parentNode.removeChild(li);
            }
        }
        changeTitle();
    });
});

//Apply the validation rules for attachments upload
function ApplyFileValidationRules(readerEvt) {
    //To check file type according to upload conditions
    if (CheckFileType(readerEvt.type) == false) {
        alert("The file (" + readerEvt.name + ") does not match the upload conditions, You can only upload jpg/png/gif files");
        e.preventDefault();
        return;
    }

    //To check file Size according to upload conditions
    if (CheckFileSize(readerEvt.size) == false) {
        alert("The file (" + readerEvt.name + ") does not match the upload conditions, The maximum file size for uploads should not exceed 300 KB");
        e.preventDefault();
        return;
    }

    //To check files count according to upload conditions
    if (CheckFilesCount(AttachmentArray) == false) {
        if (!filesCounterAlertStatus) {
            filesCounterAlertStatus = true;
            alert("You have added more than 10 files. According to upload conditions you can upload 10 files maximum");
        }
        e.preventDefault();
        return;
    }
}

//To check file type according to upload conditions
function CheckFileType(fileType) {
    if (fileType == "image/jpeg") {
        return true;
    } else if (fileType == "image/png") {
        return true;
    } else if (fileType == "image/gif") {
        return true;
    } else {
        return false;
    }
    return true;
}

//To check file Size according to upload conditions
function CheckFileSize(fileSize) {
    if (fileSize < 300000) {
        return true;
    } else {
        return false;
    }
    return true;
}

//To check files count according to upload conditions
function CheckFilesCount(AttachmentArray) {
    //Since AttachmentArray.length return the next available index in the array, 
    //I have used the loop to get the real length
    var len = 0;
    for (var i = 0; i < AttachmentArray.length; i++) {
        if (AttachmentArray[i] !== undefined) {
            len++;
        }
    }
    //To check the length does not exceed 10 files maximum
    if (len > 9) {
        return false;
    } else {
        return true;
    }
}

//Render attachments thumbnails.
function RenderThumbnail(e, readerEvt) {
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML = ['<div class="img-wrap"> <span class="close">&times;</span>' +
        '<img class="thumb" style="display:none;" src="', e.target.result, '" title="', escape(readerEvt.name), '" data-id="',
        readerEvt.name, '"/>' + '</div>'
    ].join('');

    var div = document.createElement('div');
    div.className = "FileNameCaptionStyle";
    li.appendChild(div);
    div.innerHTML = [readerEvt.name].join('');
    document.getElementById('Filelist').insertBefore(ul, null);
    changeTitle();
}

//Fill the array of attachment
function FillAttachmentArray(e, readerEvt) {
    AttachmentArray[arrCounter] = {
        AttachmentType: 1,
        ObjectType: 1,
        FileName: readerEvt.name,
        FileDescription: "Attachment",
        NoteText: "",
        MimeType: readerEvt.type,
        Content: e.target.result.split("base64,")[1],
        FileSizeInBytes: readerEvt.size,
    };
    arrCounter = arrCounter + 1;
}

function changeTitle() {
    var title = "";
    $("#imgList>li").each(function() {
        title += `${$(this).find(".FileNameCaptionStyle").text()}\n`;
    });
    $("#files").attr("title", title);
}
/*Copied from bootstrap to handle input file multiple*/
.btn {
    display: inline - block;
    padding: 6 px 12 px;
    margin - bottom: 0;
    font - size: 14 px;
    font - weight: normal;
    line - height: 1.42857143;
    text - align: center;
    white - space: nowrap;
    vertical - align: middle;
    cursor: pointer; -
    webkit - user - select: none; -
    moz - user - select: none; -
    ms - user - select: none;
    user - select: none;
    background - image: none;
    border: 1 px solid transparent;
    border - radius: 4 px;
}

/*Also */

.btn - success {
    border: 1 px solid# c5dbec;
    background: #D0E5F5;
    font - weight: bold;
    color: #2e6e9e;
}

/* This is copied from https://github.com/blueimp/jQuery-File-Upload/blob/master/css/jquery.fileupload.css */

.fileinput-button {
  position: relative;
  overflow: hidden;
}

.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity= 0)
';
font - size: 200 px;
direction: ltr;
cursor: pointer;
}

.thumb {
    height: 80 px;
    width: 100 px;
    border: 1 px solid #000;
}

ul.thumb-Images li {
  width: 120px;
  float: left;
  display: inline-block;
  vertical-align: top;
  height: 120px;
}

.img-wrap {
  position: relative;
  display: inline-block;
  font-size: 0;
}

.img-wrap .close {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 100;
  background-color: # D0E5F5;
    padding: 5 px 2 px 2 px;
    color: #000;
  font-weight: bolder;
  cursor: pointer;
  opacity: .5;
  font-size: 23px;
  line-height: 10px;
  border-radius: 50%;
}

.img-wrap:hover .close {
  opacity: 1;
  background-color: # ff0000;
}

.FileNameCaptionStyle {
    font - size: 12 px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="btn btn-success fileinput-button">
    <span>Select Attachment</span>
    <input type="file" name="files[]" id="files" multiple accept="image/jpeg, image/png, image/gif,"><br />
</span>
<output id="Filelist"></output>


Share : facebook icon twitter icon

Assign full file path of FileUpload in textbox control back to FileUpload on postback


By : user2371283
Date : March 29 2020, 07:55 AM
With these it helps That is not possible because you cannot assign a file path to the FileUpload control. Browsers don't allow that because it would be a security risk.

jQuery: how to get file name from fileupload control?


By : user3560184
Date : March 29 2020, 07:55 AM
wish help you to fix your issue The file upload control renders as an INPUT of type file. If you retrieve its Value after change, it will hold the name of the file.

Free jQuery Fileupload control with progressbar


By : Destinee
Date : March 29 2020, 07:55 AM
hop of those help? Uploadify is a flash based uploader that works with asp. Here is a tutorial that I have found that shows an example of how to set it up.
Plupload is another great file uploader plugin that I have used. I am sure you can get it to work with asp as well.

Upload a file using asp:FileUpload control by Jquery or JavaScript


By : user2780759
Date : March 29 2020, 07:55 AM
will be helpful for those in need In my webform I want to upload a file using asp:FileUpload control, , Add this javascript function to usercontrol
code :
function hookFileClick() {
    // Initiate the File Upload Click Event
    document.getElementById('<%=fUpload.ClientID%>').click();
}

function callme(oFile) {
    document.getElementById('<%=txtFilePath.ClientID%>').value = oFile.value;
}
    <table width="100%">
    <tr>
    <td style="width:70%;"><input ID="txtFilePath" runat="server" type="text" class="FlatTextbox" style= "width:100%;" /></td>
    <td style="width:29%; padding-left:15px"><asp:Button ID="btnText" runat="server" Text="" CssClass="FlatButton" Width="100%" OnClick="btnText_Click" OnClientClick="javascript:return hookFileClick();" /></td>
    <td style="width:1%"><asp:FileUpload ID="fUpload" runat="server" Style="visibility: hidden;width:1px" onchange="callme(this)"/></td>
    </tr>
    </table>
 protected void fpbImageUpload_BrowseClick(object sender, EventArgs e)
    {
        if (fpbImageUpload.HiddenFileUploadCtrl.HasFile)
        {
            String fileName = fpbImageUpload.HiddenFileUploadCtrl.FileName;
            //fpbImageUpload.FilePathText = Path.Combine(Helper.FileUploadPath, fileName);
            fpbImageUpload.HiddenFileUploadCtrl.SaveAs(Path.Combine(Helper.FileUploadPath, fileName));
        }
    } 

jQuery: how to clear context of a FileUpload control of asp.net


By : Zahid Mirza
Date : March 29 2020, 07:55 AM
Hope this helps I know to clear context of a textbox, using $('#textbox1').val(""); But how to clear context of a FileUpload control. I mean to erase the content of it's textbox. For example, I first choose a file using FileUpload control, which it shows c:\user\1.png. Now I want to clear it by using jQuery.
Related Posts Related Posts :
  • *NgFor toggle show/hide individual element
  • Add placeholder to multiple google chart string filters
  • Get value from radio button Angular Material Dialog
  • Use mergeWith of Lodash with nested objects
  • with javascript function created select onchange with counter parameter
  • SyntaxError using spread operator in webpack.config.js
  • Express - push to testing array on post request
  • Why should I use Interfaces in Typescript
  • What is a best way of detecting change of array?
  • Images are not getting the Div height when loading in jQuery
  • Find element by HTML in Cypress
  • Travsering table and storing values as key/value pair
  • Angular Material Checkbox doesn´t change state of checked
  • copy props from obj to obj in a functional Programming way
  • Bubble chart with NextJS and highcharts-react-official
  • Update value in table from Dialog Angular MAterial
  • ReferenceError because the variable is not being passed on
  • RequiredJS failed to Load a JS file
  • How can I disable the Stripe payment request button until a form is complete?
  • How to show a element immediately, such as a loading indicator, with Vue? nextTick isn't working as I expect
  • v-on:click with target not in the correct element?
  • Get last occurrence of item in array of arrays (Javascript)
  • Event binding with $(window) on dynamically created AJAX elements
  • How to use a variable in a custom function in Twilio Studio?
  • Prevent textarea from automatically scrolling when I change cursor position
  • Headless browser in Azure functions JavaScript?
  • Javascript to "fix" all hrefs of class with regex
  • How do I pass a value to list-item
  • Using component in entry component?
  • Working with different timezones in Javascript
  • Does MobX Observables have anything to do with RxJS ones?
  • Google extension how to inject my script to active tab and link with pop-up button?
  • Removing duplicate keys from object array
  • One @click event with multiple toggles
  • How to add TextToSpeech.talk("hi') action to a button
  • Not able to render vanilla webcomponent imported as template
  • How can I remove Materialize's select dropdown when using select2?
  • react-loadable multiple resource loading not working
  • Making SharePoint Lookup field multi selection in code with PNP/SP
  • input equal to a string for one array, and get string from same position from another array - JavaScript
  • Proper Method for Storing JavaScript Instances in Nan::ObjectWrap C++ Class
  • jQuery Calculate remaining characters length for input
  • Highcharts transform JSON into data without losing informations
  • How can I validate my file input name using regex?
  • Moment js interval for a day in 12 hours format
  • What would be the implementation of the function in this scenario
  • How to get text next a input tag using document.querySelector?
  • What could be reason of the error 'Maximum call stack size exceeded' inside Ember Data?
  • Leaflet polyline precision loss on zoom out
  • Convert Javascript regex to Typescript regex
  • Textext.js - Remove all tags and clean textarea
  • Array splice with unexpected results
  • Having trouble with multiple active states in ReactJS
  • Error 500 for some Ajax requests on server
  • Event call at the end of HTTP call
  • wooommerce add to cart based on gravity form radio button
  • Angular 6: table with *ngIF generates one <td> more than i need
  • how to load an external script with react?
  • Getting current stored value from database in a form on Cascading dropdowns in edit mode C# MVC
  • Best Way to Pass Query Parameters to URL Using Axios in Vue?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org