Cloud file uploading method and device for browser, equipment and medium

Abstract

The invention provides a cloud file uploading method and device for a browser, equipment and a medium, and the method comprises the steps: when the browser enters a set page, monitoring an event triggered by a file selection component through script; when a file selection component is triggered in a set page, the ContentJs is notified through a first custom event; the ContentJs notifies Background Js to create a pop-up window, and the pop-up window is used for displaying a cloud file list; a file needing to be uploaded is selected from the cloud file list through the pop-up window and uploaded; the cloud file can be selected as the uploaded file, so that the safety of the file to be uploaded is ensured, and the user can use the file conveniently.

Description

Technical Field

[0001] The present invention relates to the field of file uploading technology, and in particular to a cloud file uploading method, device, equipment and medium for a browser. Background Art

[0002] In web applications, file upload is a common function. The traditional file upload method requires users to select files from their local computer to upload them. The existing browser file upload technology is: Based on the HTML5 File API, through <input type＝"file"> Implement basic file selection, use FileReader to read file contents, use FormData to upload files; or directly upload by dragging and dropping, use the Drag and Drop API, and process files through the DataTransfer object;

[0003] The above method has the following problems:

[0004] 1. If the file is stored in the cloud, the user needs to download the cloud file to the local computer first and then upload it to the target website, which causes redundant data transmission, increases the user operation steps, and reduces efficiency;

[0005] 2. If the file to be uploaded is sensitive, there is a risk of leakage;

[0006] 3. It takes up local storage space and requires users to clean it up regularly. Summary of the Invention

[0007] The technical problem to be solved by the present invention is to provide a cloud file uploading method, device, equipment and medium for browser, so that the uploaded files can select cloud files, ensure the security of the uploaded files, and be convenient for users to use.

[0008] In a first aspect, the present invention provides a cloud file uploading method for a browser, comprising the following steps:

[0009] Step 1: When the browser enters the settings page, use script to listen for events triggered by the file selection component.

[0010] Step 2: When the file selection component is triggered in the settings page, ContentJs is notified through the first custom event;

[0011] Step 3: ContentJs notifies BackgroundJs to create a pop-up window, which is used to display the cloud file list;

[0012] Step 4: Select the file you want to upload from the cloud file list in the pop-up window and upload it.

[0013] In a second aspect, the present invention provides a cloud file uploading device for a browser, comprising:

[0014] The monitoring module monitors the events triggered by the file selection component through scripts when the browser enters the settings page;

[0015] Select the trigger module. When the file selection component is triggered in the settings page, ContentJs is notified through the first custom event.

[0016] In the display module, ContentJs notifies BackgroundJs to create a pop-up window, which is used to display the cloud file list;

[0017] In the upload module, select the file you want to upload from the cloud file list through the pop-up window and upload it.

[0018] In a third aspect, the present invention provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect when executing the program.

[0019] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, which implements the method described in the first aspect when the program is executed by a processor.

[0020] One or more technical solutions provided by the present invention have at least the following technical effects or advantages:

[0021] The present invention realizes the browser's native file selection interception, provides a unified resource processing interface, and realizes the direct upload of cloud files; and supports the upload of any downloadable resources, simplifying the user operation process.

[0022] The uploaded cloud files in the present invention will not be stored locally, which improves the security of the files and meets the customized needs of enterprise users for file selection.

[0023] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are specifically listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0025] Figure 1 This is a flowchart of the method in Example 1 of the present invention;

[0026] Figure 2This is a schematic diagram of the structure of the device in Example 2 of the present invention. DETAILED DESCRIPTION

[0027] The embodiments of the present application provide a cloud file uploading method, apparatus, device and medium for a browser, so that the uploaded files can be selected as cloud files, ensuring the security of the uploaded files and being convenient for users to use.

[0028] The technical solutions in the embodiments of this application have the following general ideas:

[0029] By leveraging the plugin's capabilities, we can intercept file selection events on the page and pop up a window to allow users to select a cloud file. After selecting a file, the file is downloaded, converted into data, and passed to the front-end page. This data is then injected into the upload control with input=file through a specific event, triggering a change event to initiate the original upload process. By assembling new File objects, we can implement multiple file and folder selection modes.

[0030] The specific steps include:

[0031] 1. The user enters page A, and the plug-in injects a script to listen for events triggered by the file selection component;

[0032] 2. When the user triggers the file selection component (input selection box) on page A, the ContentJs injected by the plug-in is notified through the first custom event;

[0033] 3. ContentJs notifies BackgroundJs to create a new pop-up window B;

[0034] 4. Pop-up window B is used to display the cloud file list and also allows users to re-trigger local selection;

[0035] 5. If the user selects a file in pop-up window B, clicks Download and uploads;

[0036] 5.1 After the file is downloaded in pop-up window B, a Blob object will be generated, passed to BackgroundJs and then to ContentJs;

[0037] 5.2ContentJs reconstructs the second custom event and changes the value of inputtype=file to the corresponding file object;

[0038] 6. If the user chooses to use a local file in pop-up window B;

[0039] 6.1 Trigger a specific event through BackgroundJs to let inputtype=file re-trigger the selection;

[0040] 6.2 The user makes the original folder selection.

[0041] The specific implementation is as follows:

[0042] Implemented a browser extension that allows users to select files from cloud file storage, not just local files, when selecting files on a web page. It intercepts click events on the file input box and pops up a cloud file selection interface. After the user selects a cloud file, the file is downloaded to the local computer, simulating the user selecting the file.

[0043] 1. The function of inject.js: intercepting web pages<inputtype="file"> , preventing the default file selector from popping up; sending a custom event to content.js to notify the extension that the user is trying to select a file; receiving file data from content.js and injecting the file data into <input type＝"file"> , simulating a user selecting a file.

[0044] 1. Save the original click method

[0045] javascript

[0046] const originalClick=HTMLInputElement.prototype.click;

[0047] Save the native click method so that it can be called when needed.

[0048] 2. Listen for mousedown and click events

[0049] javascript

[0050] document.addEventListener("mousedown",(event)=>{...});

[0051] document.addEventListener("click",(event)=>{...});

[0052] Interception<inputtype="file"> , preventing the default file chooser from popping up. If useLocalFile is false, the default behavior is prevented.

[0053] 3. Rewrite the click method

[0054] javascript

[0055] HTMLInputElement.prototype.click=function(){...};

[0056] Rewrite <input type＝"file"> If the current input box is a file and useLocalFile is false, the custom event a1_file_input_click is sent to the window to notify content.js.

[0057] 4. Receive file data and inject

[0058] javascript

[0059] window.addEventListener("a1_set_file_data",(e)=>{...});

[0060] Receive file data from content.js, create a File object, and inject it into <input type＝"file"> Then trigger the change event.

[0061] 2. Functions of content.js: Inject the inject.js script into the web page; listen for the a1_file_input_click event and notify background.js that the user is trying to select a file; receive file data from background.js, convert it into a File object, and then send it to inject.js through a custom event.

[0062] 1. Inject inject.js

[0063] javascript

[0064] const injectScript=()=>{...};

[0065] injectScript();

[0066] Create one <script>标签，将inject.js的内容注入到网页中。

[0067] 2.监听a1_file_input_click事件

[0068] javascript

[0069] window.addEventListener("a1_file_input_click",(e)＝>{...})；

[0070] 监听到用户点击文件输入框后，将相关信息发送给background.js。

[0071] 3.处理文件数据

[0072] javascript

[0073] chrome.runtime.onMessage.addListener((message,sender,sendResponse)＝>{...})；

[0074] 接收来自background.js的文件数据，根据文件的blobUrl或blob数据，创建File对象，并通过自定义事件发送给inject.js。

[0075] 三、background.js的功能：监听来自content.js的消息，弹出云文件选择界面；接收来自云文件选择界面的文件选择结果，将文件数据发送给content.js。

[0076] 1.监听文件选择拦截消息

[0077] javascript

[0078] chrome.runtime.onMessage.addListener((message,sender,sendResponse)＝>{...})；

[0079] 监听到content.js发送的文件选择拦截消息后，弹出云文件选择界面。

[0080] 2.处理文件选择结果

[0081] javascript

[0082] chrome.runtime.onMessage.addListener((message,sender,sendResponse)＝>{...})；

[0083] 接收来自云文件选择界面的文件选择结果，将文件数据发送给content.js。

[0084] 四、cloud-files-choice.tsx的功能：提供一个云文件选择界面，用户可以选择云端文件或本地文件；如果用户选择云端文件，则下载文件并将其信息发送给background.js；如果用户选择本地文件，则通知content.js使用本地文件。

[0085] 1.选择文件来源

[0086] javascript

[0087] const handleSourceSelect＝(source:"cloud"|"local")＝>{...}；

[0088] 用户可以选择从云端文件存储或本地计算机选择文件。如果选择本地文件，则通知content.js使用本地文件。

[0089] 2.加载云端文件列表

[0090] javascript

[0091] const loadFolderList＝async()＝>{...}；

[0092] 从云端加载文件夹列表，显示给用户。

[0093] 3.准备下载队列

[0094] javascript

[0095] constprepareDownloadQueue＝async()＝>{...}；

[0096] 根据用户选择的文件，准备下载队列。

[0097] 4.开始下载文件

[0098] javascript

[0099] const startDownload＝async()＝>{...}；

[0100] 并行下载所有文件，并更新下载进度。

[0101] 5.重试下载失败的文件

[0102] javascript

[0103] const retryDownload＝async(fileId:string)＝>{...}；

[0104] 用户可以重试下载失败的文件。

[0105] 6.完成下载并发送文件

[0106] javascript

[0107] const completeAndSendFiles＝()＝>{...}；

[0108] 下载完成后，将文件信息发送给background.js。

[0109] 实现了一个浏览器扩展的核心功能，允许用户在网页中选择文件时，可以选择云端文件。它通过拦截文件输入框的点击事件，弹出云文件选择界面，用户选择文件后，文件会被下载到本地，然后模拟用户选择了这些文件。整个流程涉及多个脚本的协作，包括inject.js、content.js、background.js和cloud-files-choice.tsx。

[0110] 实施例一

[0111] 如图1所示，本实施例提供一种用于浏览器的云文件上传方法，包括下述步骤：

[0112] 步骤1、当浏览器进入设定页面，通过script监听文件选择组件被触发的事件；

[0113] 步骤2、当在设定页面中触发文件选择组件，则通过第一自定义event事件通知ContentJs；

[0114] 步骤3、ContentJs通知BackgroundJs去创建一弹窗，所述弹窗用于展示云端文件列表；

[0115] 步骤4、通过弹窗从云端文件列表中选择所需上传的文件，进行上传。

[0116] 本实施例地，优选地，所述步骤3具体为：ContentJs通知BackgroundJs去创建一弹窗，所述弹窗用于展示云端文件列表，所述所述弹窗中设有一本地按钮，用于用户触发本地文件列表。

[0117] 本实施例地，优选地，所述步骤4还包括：若在弹窗中触发本地按钮，则选择使用本地文件；通过BackgroundJs触发第二自定义event事件，让input type＝file重新触发选择；在弹窗中展示本地文件列表，在所述本地文件列表中选择文件，进行上传。

[0118] 本实施例地，优选地，所述步骤4具体为：通过弹窗从云端文件列表中选择所需上传文件，将所需上传文件进行下载，之后生成Blob对象，传递给BackgroundJs，之后再传递给ContentJs；ContentJs构造第二自定义event事件，将inputtype＝file的值改成所述所需上传文件的对象，进行上传。

[0119] 基于同一发明构思，本申请还提供了与实施例一中的方法对应的装置，详见实施例二。

[0120] 实施例二

[0121] 如图2所示，在本实施例中提供了一种用于浏览器的云文件上传装置，包括：

[0122] 监听模块，当浏览器进入设定页面，通过script监听文件选择组件被触发的事件；

[0123] 选择触发模块，当在设定页面中触发文件选择组件，则通过第一自定义event事件通知ContentJs；

[0124] 展示模块，ContentJs通知BackgroundJs去创建一弹窗，所述弹窗用于展示云端文件列表；

[0125] 上传模块，通过弹窗从云端文件列表中选择所需上传的文件，进行上传。

[0126] 本实施例地，优选地，所述展示模块具体为：ContentJs通知BackgroundJs去创建一弹窗，所述弹窗用于展示云端文件列表，所述所述弹窗中设有一本地按钮，用于用户触发本地文件列表。

[0127] 本实施例地，优选地，所述上传模块还包括：若在弹窗中触发本地按钮，则选择使用本地文件；通过BackgroundJs触发第二自定义event事件，让input type＝file重新触发选择；在弹窗中展示本地文件列表，在所述本地文件列表中选择文件，进行上传。

[0128] 本实施例地，优选地，所述上传模块具体为：通过弹窗从云端文件列表中选择所需上传文件，将所需上传文件进行下载，之后生成Blob对象，传递给BackgroundJs，之后再传递给ContentJs；ContentJs构造第二自定义event事件，将inputtype＝file的值改成所述所需上传文件的对象，进行上传。

[0129] 由于本发明实施例二所介绍的装置，为实施本发明实施例一的方法所采用的装置，故而基于本发明实施例一所介绍的方法，本领域所属人员能够了解该装置的具体结构及变形，故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。

[0130] 基于同一发明构思，本申请提供了实施例一对应的电子设备实施例，详见实施例三。

[0131] 实施例三

[0132] 本实施例提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，可以实现实施例一中任一实施方式。

[0133] 由于本实施例所介绍的电子设备为实施本申请实施例一中方法所采用的设备，故而基于本申请实施例一中所介绍的方法，本领域所属技术人员能够了解本实施例的电子设备的具体实施方式以及其各种变化形式，所以在此对于该电子设备如何实现本申请实施例中的方法不再详细介绍。只要本领域所属技术人员实施本申请实施例中的方法所采用的设备，都属于本申请所欲保护的范围。

[0134] 基于同一发明构思，本申请提供了实施例一对应的存储介质，详见实施例四。

[0135] 实施例四

[0136] 本实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。

[0137] 本申请实施例中提供的技术方案，至少具有如下技术效果或优点：

[0138] 本发明能够优化让用户可以选择上传文件的位置，如果只选择云盘，可以限制用户的上传渠道，在某些场景下更加安全；如果是企业用户，可以将文件只放在云盘上，让员工去使用；该方案降低了用户传递文件的步骤，只需将文件传到指定云盘，其他人就可以在列表中选择文件上传；由于文件只需要上传一次到云盘中，这样其他人就不会有多余的文件，防止文件泄漏；本发明开发迭代速度快，与操作系统不存在任何关系，通用性强，可以适配到各种需要的系统中去使用，开发成本低，易于维护。

[0139] 本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

[0140] 本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和 / 或方框图来描述的。应理解可由计算机程序指令实现流程图和 / 或方框图中的每一流程和 / 或方框、以及流程图和 / 或方框图中的流程和 / 或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的装置。

[0141] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能。

[0142] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的步骤。

[0143] 虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。< / script>

Claims

1. A cloud file uploading method for a browser, characterized by: The steps include: Step 1: When the browser enters the settings page, use script to listen for events triggered by the file selection component. Step 2: When the file selection component is triggered in the settings page, ContentJs is notified through the first custom event; Step 3: ContentJs notifies BackgroundJs to create a pop-up window, which is used to display the cloud file list; Step 4: Select the file you want to upload from the cloud file list in the pop-up window and upload it.

2. A cloud file uploading method for a browser according to claim 1, characterized in that: The step 3 is specifically as follows: ContentJs notifies BackgroundJs to create a pop-up window, the pop-up window is used to display the cloud file list, and a local button is provided in the pop-up window for the user to trigger the local file list.

3. The cloud file uploading method for a browser according to claim 2, characterized in that: The step 4 further includes: if the local button is triggered in the pop-up window, selecting to use a local file; triggering a second custom event through BackgroundJs, allowing input type=file to re-trigger the selection; displaying a local file list in the pop-up window, selecting a file in the local file list, and uploading it.

4. The cloud file uploading method for a browser according to claim 1, characterized in that: Step 4 is specifically as follows: select the required uploaded file from the cloud file list through a pop-up window, download the required uploaded file, then generate a Blob object, pass it to BackgroundJs, and then pass it to ContentJs; ContentJs constructs a second custom event event, changes the value of input type=file to the object of the required uploaded file, and uploads it.

5. A cloud file upload device for a browser, characterized by: include: The monitoring module monitors the events triggered by the file selection component through scripts when the browser enters the settings page; Select the trigger module. When the file selection component is triggered in the settings page, ContentJs is notified through the first custom event. In the display module, ContentJs notifies BackgroundJs to create a pop-up window, which is used to display the cloud file list; In the upload module, select the file you want to upload from the cloud file list through the pop-up window and upload it.

6. The cloud file upload device for a browser according to claim 5, characterized in that: The display module is specifically as follows: ContentJs notifies BackgroundJs to create a pop-up window, the pop-up window is used to display the cloud file list, and a local button is provided in the pop-up window for the user to trigger the local file list.

7. The cloud file upload device for a browser according to claim 6, characterized in that: The upload module also includes: if the local button is triggered in the pop-up window, the local file is selected; a second custom event is triggered through BackgroundJs, and inputtype=file is re-triggered for selection; a local file list is displayed in the pop-up window, and a file is selected from the local file list for uploading.

8. The cloud file upload device for a browser according to claim 5, characterized in that: The upload module specifically selects the required upload file from the cloud file list through a pop-up window, downloads the required upload file, generates a Blob object, passes it to BackgroundJs, and then passes it to ContentJs; ContentJs constructs a second custom event, changes the value of input type=file to the object of the required upload file, and uploads it.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the method according to any one of claims 1 to 4 is implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images