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
- How to trigger the file upload input in Angular? (5 years old, assumes I can change the javascript)
- Trigger input change on website using Angular with Chrome Extension content script (6 years old, AngularJS, assumes I can access
angular.element(elem).scope())