Make a beautiful web app look similer to google drive in nextjs use the telebox api docs , make it fully functional and add all apis also give full code my token: I286en8Ywx3GpEZQ TeleBox Development API Documentation 1. TeleBox provides a simple HTTP API to integrate ours into your business or application. 2. All request shall be GET or POST 3. All API are based on API token, please keep it safe. You can find your token through : https://www.telebox.online/admin/account Rename File When you need to edit the filename GET https://www.telebox.online/api/open/file_rename Request Parameters Parameters Required Type Description itemId yes string file id name yes string file new name token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } TeleBox Development API Documentation Save File Save the file to your space. GET https://www.telebox.online/api/open/file_save Request Parameters Parameters Required Type Description itemIds yes string file id pid yes number Destination folder id. 0 means save to the root directory. token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } TeleBox Development API Documentation Move File Save the file to your space. GET https://www.telebox.online/api/open/file_move Request Parameters Parameters Required Type Description itemIds yes string file id pid yes number Destination folder id. 0 means move to the root directory. token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } TeleBox Development API Documentation Delete File Delete the file if you don't need it anymore. GET https://www.telebox.online/api/open/file_del Request Parameters Parameters Required Type Description itemIds yes string file id token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } TeleBox Development API Documentation Share File Share the file to your friends. GET https://www.telebox.online/api/open/file_share Request Parameters Parameters Required Type Description itemIds yes string file id expire_enum yes number 1:24 hours; 2:7 days; 3:30 days; 4:permanent token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message data yes json {'shareToken':''} Response Example { "data": { "shareToken": "YNpN123" }, "msg": "success", "status": 1 } Error Code Error Code Description 100 invalid request TeleBox Development API Documentation Search File Search the keyword to quickly find the file you want. GET https://www.telebox.online/api/open/file_search Request Parameters Parameters Required Type Description name yes string Search keywords pid yes number Destination folder id. 0 means the root directory token yes string Your API token pageNo yes number Current page number pageSize yes number The number of items returned per page Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message data yes json Search result Response Example { "data": { "list": [ { "alreadyJoin": false, "avatar_verc": "df_0818182638", "comm_utime": 1663840892, "cou": "", "cover": "https://avatar.fuplink.net/avatar/dircover_test/9490?verc=df_0818182638", "creator_uid": 35861347, "ctime": 1660818398, "desc": "", "ext_json": "{\"canShare\": 1, \"canInvite\": 1, \"canPublic\": 1}", "fromSdir": true, "hide_share": false, "id": 9490, "lan": "", "limit_num": 0, "memberCnt": 2, "name": "hello", "name_sort": "hello", "ntime": 1660818451, "op_type": "", "owner_uid": 35861347, "pb_search": 1, "pid": 0, "shareDirName": "hello", "shareToken": "lbLinkId_NMA7W", "show_members": 1, "size": 0, "src": "keyword", "tname": "hello", "tpid": 9490, "type": "sdir", "type_sort": 1, "utime": 1660818451, "v_lb": 0, "v_sw": 0, "ver": "sync-99" } ] }, "status": 1 } TeleBox Development API Documentation Create Folder Create a new folder. GET https://www.telebox.online/api/open/folder_create Request Parameters Parameters Required Type Description name yes string Folder name pid yes number Destination folder id. 0 means save to the root directory. token yes string Your API token isShare yes number Folder type. 0: normal folder; 1: shared link. canInvite yes number Allow to invite. 0: yes; 1: no.(only for link) canShare yes number Allow to share. 0: yes; 1: no.(only for link) withBodyImg yes binary 0: no image; 1: has image within body(< 1 MB). desc yes string desc Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "data": { "dirId": 0 }, "msg": "folder name dup", "status": 1501 } Folder Details Check the file lists of the current folder. GET https://www.telebox.online/api/open/folder_details Request Parameters Parameters Required Type Description dirId yes number Current folder id token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message data yes json Return file list details Response Example { "data": { "auth_organize_name": "", "canInvite": 1, "canShare": 1, "commUtime": 0, "cou": "SG", "creator_uid": 1161911429, "ctime": 1651919956, "desc": "", "id": 23204, "img_url": "https://avatar.fuplink.net/avatar/dircover/23204", "lan": "SG", "limit_num": 0, "memberLimitCnt": 0, "mute": 0, "name": "movhub", "ntime": 0, "op_type": "", "owner_uid": 1161911429, "pid": 0, "pname": "", "show_members": 1, "size": 0, "tpid": 23204, "type": "sdir", "utime": 1659425958, "v_lb": 0, "v_sw": 0, "ver": "sync-97" }, "status": 1 } Edit Folder Edit the folder name or set other access. GET https://www.telebox.online/api/open/folder_edit Request Parameters Parameters Required Type Description dirId yes number Current folder id name yes string Folder name token yes string Your API token canShare yes number Allow to share. 0: yes; 1: no.(only for link) canInvite yes number Allow to invite. 0: yes; 1: no.(only for link) change_avatar yes binary 0: no image; 1: has image within body(< 1 MB). desc yes string dir description infos Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } Move Folder Move the folder from the current folder to another folder. GET https://www.telebox.online/api/open/folder_move Request Parameters Parameters Required Type Description dirIds yes string Folder ids to move, multiple separated by commas pid yes number Destination folder id. 0 means move to the root directory. token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } Delete Folder Delete the whole folder if you don't need it anymore. GET https://www.telebox.online/api/open/folder_del Request Parameters Parameters Required Type Description dirIds yes number Folder ids to delete, multiple separated by commas token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } Save Folder Save the folder to your space. GET https://www.telebox.online/api/open/folder_save Request Parameters Parameters Required Type Description dirIds yes string Folder ids to move, multiple separated by commas pid yes number Destination folder id. 0 means move to the root directory. token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "msg": "success", "status": 1 } Upload authorization Step one for local file upload: get upload authorization. GET https://www.telebox.online/api/open/get_upload_url Request Parameters Parameters Required Type Description fileMd5ofPre10m yes number md5 of the first 10m of the uploaded file fileSize yes number Full size of the file (byte) token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Data yes json Return data Response Example { "data": { "signUrl": "http://xx -- Then CURL PUT your file with sign url " }, "msg": "please use this url to upload (PUT method)", "status": 1 } Upload File Step two for local file upload: create file item. GET https://www.telebox.online/api/open/folder_upload_file Request Parameters Parameters Required Type Description fileMd5ofPre10m yes string md5 of the first 10m of the uploaded file fileSize yes number Full size of the file (byte) pid yes number Destination folder id. 0 means save to the root directory. diyName yes string File name token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message data yes json The file id of LinkBox Response Example { "data": { "itemId": "" }, "msg": "folder name dup", "status": 1501 } Share Folder Share the folder to your friends. GET https://www.telebox.online/api/open/folder_share Request Parameters Parameters Required Type Description dirId yes string Folder id expire_enum yes number 1:24 hours; 2:7 days; 3:30 days; 4:permanent token yes string Your API token Response Parameters Parameters Required Type Description status yes number Return status code: 1 means success; other means failure msg yes string Return message Response Example { "data": { "shareToken": "" }, "msg": "success", "status": 1 }
I'll create a Google Drive-like web application using Next.js that integrates with the TeleBox API. This app will have a clean, responsive interface with all the functionality described in the API docs.
This Google Drive-like web application implements all the functionality from the TeleBox API documentation:
File Operations
Folder Operations
Search Functionality
Upload System
User Interface
API Integration
lib/api.tsComponent Structure
State Management
Responsive Design
To use this application, simply deploy it to a Next.js hosting platform like Vercel. The app is ready to use with the provided TeleBox API token.
The code returns the following error:
Error fetching files: Unexpected token 'T', "Too Many R"... is not valid JSON
at FileExplorer (/components/file-explorer)
Revise the code to address the error.
I was previewing: /drive
The error you're seeing is because the TeleBox API is returning a "Too Many Requests" response instead of valid JSON. Let's fix the error handling in our code to properly handle this situation.
I've made several changes to handle the "Too Many Requests" error:
Improved API Error Handling:
fetchApi function to properly handle non-JSON responsesAdded Fallback Mechanism:
Enhanced Error Reporting:
Improved User Experience:
These changes make the application more resilient to API failures and provide a better user experience when the TeleBox API is unavailable or rate-limited.
To further improve the application, you might consider:
API request error: Failed to fetch
at fetchApi (/lib/api) at async handleUpload (/components/dialogs/upload-file-dialog) Error uploading file: Failed to fetch
at handleUpload (/components/dialogs/upload-file-dialog)
Failed to fetch folder details
soo much api errors go throgh the docs which i gave first and give me the fully functional telebox drive