How can a Chrome extension trigger an Angular file upload

36 views Asked by At

For some time now, I've been using a Chrome extension I created to help me upload files to Blackboard. I upload the files to my extension's popup window, read the contents and filename, and inject the following into the page:

const file = new File([contents],filename,{"type":'text/csv'}),
    dt = new DataTransfer();
dt.items.add(file);
document.querySelector('input[type="file"]').files = dt.files;
setTimeout(function() {
    document.querySelector('input[type="submit"]').click();
},1000);

This website is now switching over to Angular, and this no longer appears to work. The relevant new HTML is (I think):

<div class="file-upload-container">
 <div ngf-drop="" ng-model="files" class="file-upload ng-pristine ng-valid ng-empty ng-touched" ngf-multiple="fileUpload.allowMultiple" ngf-drop-disabled="disableDrag && disableDrag()" ngf-change="fileUpload.onFileSelect($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event)" ngf-stop-propagation="!(disableDrag && disableDrag())" ngf-drag-over-class="dragClass" tabindex="-1">
  <div class="fileUploadTransclude" ng-transclude="" ng-show="fileUpload.transcludeVisible">
   <div class="columns drag-area ng-scope" ng-class="{'dropped': gradesUploadSettings.hasDroppedClass}">
    <div class="file-icon"></div>
    <div class="drag-info">
     <p bb-translate="" class="ng-scope">Drop your spreadsheet to upload</p>
     <p bb-translate="" class="ng-scope">You can upload a CSV or XLS file</p>
    </div>
   </div>
  </div>
  <div class="js-file-upload-complete" ng-attr-ready="{{!fileUpload.uploadInProgress}}" ready="true"></div>
  <div ng-show="fileUpload.fileReviewVisible" class="file-upload-review ng-hide"></div>
 </div>
 <input ngf-select="" ng-if="!fileUpload.allowMultiple" type="file" ngf-change="fileUpload.onFileSelect($files)" class="hide fileUploadInput ng-scope" analytics-id="components.directives.fileUpload.input.file"><!-- end ngIf: !fileUpload.allowMultiple -->
</div>

How can I trigger a file upload with this new page? Note that this isn't my page, so I can't change the existing html or javascript. But this is a Chrome extension, so I can add whatever javascript I want. The closest questions I've been able to find are

0

There are 0 answers