function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
prasad vivekprasad vivek 

Hi, i have a scenario where i have to upload files to AWS S3 but while uploading multiple files i want multiple progress bars, i tried but not getting that. PLz help me

                  
                    <form action="#"  method="post" enctype="multipart/form-data" id="uploadForm">
                        <h4 class="fileToUpload">Select a File to Upload in AWS</h4><br />
                            <div class="row slds-box">
                                <input type="file" size="50" name="file" id="file" onchange="fileSelected();" multiple="true" />
                                    </div>
                                <div class="row">
                                    <input type="submit" value="Upload"   id="btn_submit"  /> 
                                        <!--  <input type="submit" value="delete"   id="btn_delete"  /> -->
                                            <button type="submit" value="Submit" onclick="deleteFile();" id="btn_delete">Delete</button>
                                            </div>
                                            
                                            
                                            
                                            
                                            <div class="progress">
                                                
                                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"  id="Upload1" style="width:0%">
                                                    <!--<span class="box1" id="span1"></span>-->
                                                    </div>
                                                    </div>
                                                    
                                                    </form>
                                                    </div>
                                                    
                                                    
                                  
function fileSelected(){
        
        alert('Inside file select');
        
        var file = document.getElementById("file")//All files
         a=file.files.length;
        for (var i = 0; i < file.files.length; i++) {
            uploadSingleFile(i);
        }
        
        function uploadSingleFile(i) {
            
            var bucket = new AWS.S3({params: {Bucket: 'sfdc-einstein-demo'}}); 
            var fileChooser = document.getElementById('file');
            var file = fileChooser.files[i];
            var filename1=file.name;
            var filetype=file.type;
            var size=file.size;
            if(size>=1024000000){
                var gsize= (size/1024000000) + " " + "GB";
            }
            else{var gsize=(size/1000000) + " " + "MB";}
            
            var myString= filename1;
            if (file) {
                
                var params = {Key:"test-account/" + file.name, ContentType: file.type, Body: file, Size: file.size};
                //alert('after params'+params);
                bucket.upload(params).on('httpUploadProgress', function(evt) {
                    // alert('inside upload'+i);
                    
                    //multiplyNode(document.querySelector('.Upload1'), i, true);
                    //document.querySelector('.box',1,true);
                     console.log("Uploaded :: " + parseInt((evt.loaded * 100) / evt.total)+'%');
                    var per=parseInt((evt.loaded * 100) / evt.total)+'%';
                document.getElementById("Upload1").style.width=per ;
                    //alert('after document'+per);
                }).send(function(err, data) {
                    // alert('inside send function');
                    if(!err) {
                    
                        // alert("File uploaded Successfully");
                    
                    
                    var myString = filename1;
                    var s=filetype;
                    // alert(filetype);
                    document.getElementById('{!$Component.form.testText}').value =filename1;
                    jQuery('[id$=myPlaceholder]').text(myString)   
                    jQuery('[id$=check]').text(myString)   
                    jQuery('[id$=testText]').text(myString) 
                    jQuery('[id$=testtype]').val(s)   
                    jQuery('[id$=testSize]').val(gsize)
                    
                        if ($('#testText').val() !== '') {
                        $('#form').submit();
                        }
                    
                    } else{
                    alert(err);}                              
                
                });
            }
        
        }
        
      
        
    }