{"id":18378682,"url":"https://github.com/zainali99/bit","last_synced_at":"2025-06-14T17:38:44.396Z","repository":{"id":91901994,"uuid":"222314655","full_name":"zainali99/bit","owner":"zainali99","description":"bit is a javascript image uploader","archived":false,"fork":false,"pushed_at":"2024-10-23T14:00:25.000Z","size":538,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-23T15:31:30.366Z","etag":null,"topics":["easy-to-use","event-emitter","file","file-upload","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zainali99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-17T21:29:28.000Z","updated_at":"2024-10-23T14:00:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"a5d98ce8-e725-42b1-a516-e9a9d4fe5b0d","html_url":"https://github.com/zainali99/bit","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainali99%2Fbit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainali99%2Fbit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainali99%2Fbit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainali99%2Fbit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zainali99","download_url":"https://codeload.github.com/zainali99/bit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361440,"owners_count":21090899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["easy-to-use","event-emitter","file","file-upload","javascript"],"created_at":"2024-11-06T00:34:46.724Z","updated_at":"2025-04-11T08:30:13.924Z","avatar_url":"https://github.com/zainali99.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://github.com/zainali99/bit/assets/9899154/acffe6be-ee2d-40f7-88d3-138f1a06956c)\n\n# What is bit ?\nThe Bit class is an event-driven JavaScript class that provides functionality for file uploads, drag-and-drop file management, and UI rendering for file previews. It uses the EventEmitter pattern to handle events and has built-in support for internationalization (i18n).\n### TODO before first release 1.0\n\n- [ ] Use web-worker for reading files.\n- [ ] basic validation hook\n- [ ] improve i18n system\n- [ ] read large file faster without crashing browser\n\n\n\n# current features:\n- [x] drag/drop files\n- [x] add additional data (object) to each file to send later with ajax requests. \n- [x] implemented basic i18n support\n- [x] basic XHR upload func\n- [x] Emit basic hooks: getFiles, etc\n\n\n# TODO before the next major release:\n- [ ] Basic system of plugins\n\n# Documentation \n- (Updated docs: [docs](docs.html)\n## Bit Class Documentation\n\n## Overview\nThe `Bit` class is an event-driven JavaScript class that provides functionality for file uploads, \ndrag-and-drop file management, and UI rendering for file previews. It uses the `EventEmitter` \npattern to handle events and has built-in support for internationalization (i18n).\n\n## Dependencies\nThis class extends the `EventEmitter` class, which handles event registration and triggering.\n\n## Constructor\n\n### `Bit(element, options = {})`\n\n#### Parameters:\n- **`element`** (*HTMLElement*): The HTML element where the Bit instance will be initialized.\n- **`options`** (*Object*): An optional configuration object containing:\n  - `upload_url` (*string*): The URL where files will be uploaded.\n  - `headers` (*Object*): Custom headers to be sent with the upload request.\n  - `maxFiles` (*number*): The maximum number of files that can be uploaded (default is `Infinity`).\n  - `friendlyName` (*string*): A friendly name for the instance.\n  - `language` (*string*): The language for internationalization.\n  - `fallBackLanguage` (*string*): Fallback language if the specified language is not supported.\n  - `fallBackAddedFileBlobType` (*string*): Fallback blob type for manually created files.\n\n### Example:\n```javascript\nconst bitInstance = new Bit(document.getElementById('upload-area'), {\n    upload_url: 'https://example.com/upload',\n    headers: { 'Authorization': 'Bearer token' },\n    maxFiles: 10,\n    friendlyName: 'My Upload Widget',\n    language: 'en'\n});\n```\n\n## Properties\n- `id`: A unique identifier for the Bit instance.\n- `version`: The version of the Bit class.\n- `files`: An array to store the files that have been added.\n- `upload_url`: The URL to which files will be uploaded.\n- `headers`: Custom headers for the upload request.\n- `element`: The HTML element associated with this Bit instance.\n- `max_args_num`: The maximum number of arguments that can be logged (for internal use).\n- `mode`: The mode of the Bit instance, can be 'dev' or 'prod'.\n- `maxFiles`: Maximum files allowed for upload.\n- `friendlyName`: A user-friendly name for the instance.\n- `language`: The current language setting.\n- `fallBackLanguage`: Fallback language if the specified language is not supported.\n- `DOM_IDS`: Object containing DOM element identifiers used within the instance.\n- `icons`: Object containing SVG icons used in the UI.\n- `i18n_dict`: Object for storing internationalization strings.\n\n## Methods\n\n### `init()`\nInitializes the Bit instance by setting up event listeners, applying CSS, and creating a hidden input for file selection.\n\n### `applyBasicCSS()`\nInjects basic CSS styles into the document for the UI components of the Bit instance.\n\n### `onFileSelect(e)`\nHandles the selection of files through the hidden input.\n\n### `buildPreviews()`\nGenerates previews for the selected files asynchronously.\n\n### `onDragOver(ev)`\nHandles the drag-over event to allow file drops.\n\n### `onDrop(ev)`\nHandles the drop event to capture files and add them to the instance.\n\n### `createBitItem(file)`\nCreates a UI component for a file and appends it to the Bit element.\n\n### `show_images(file)`\nDisplays images in the UI. If a file is provided, only that file is displayed; otherwise, all files are shown.\n\n### `getFiles(form_data = false, raise_error = false, uploaded = false)`\nReturns a `FormData` object containing the files added to the Bit instance.\n\n#### Parameters:\n- `form_data` (*boolean*): If true, returns a `FormData` object; otherwise, returns the files array.\n- `raise_error` (*boolean*): If true, throws an error if no files exist.\n- `uploaded` (*boolean*): Filters files based on their upload status.\n\n### `upload()`\nUploads the files to the specified `upload_url` using an XMLHttpRequest.\n\n### `addFiles(data)`\nAdds files to the Bit instance from an array of data objects.\n\n#### Parameters:\n- `data` (*Array*): An array of objects representing files to be added.\n\n### `update(token = \"\", index = null, obj = {})`\nUpdates the properties of a file identified by its token or index.\n\n#### Parameters:\n- `token` (*string*): The token of the file to update.\n- `index` (*number*): The index of the file to update (optional).\n- `obj` (*Object*): An object containing updated properties for the file.\n\n## Example Usage of Methods\n\n### Using the upload method\n```javascript\nbitInstance.upload();\n```\n\n### Getting files as FormData\n```javascript\nconst formData = bitInstance.getFiles(true);\n```\n\n### Updating a file\n```javascript\nbitInstance.update('file-token', null, { name: 'New File Name' });\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzainali99%2Fbit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzainali99%2Fbit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzainali99%2Fbit/lists"}