Copy this app into your Google AI Studio:
This app is purely front-end. You’ll need to add your own backend.
ai.studio
ai.studio
Prompt your own:
Main Prompt:
Create a Gemini Drive App where users will upload their files, see them in history and can search/filter at the top. Users can filter by file type/upload date/name. Users can add notes/edit file name when they upload the file or after it is uploaded. Organise the uploaded files by date added automatically. When a file is uploaded show the file preview. When it is opened, user can view the file full screen.
Implementing Icons Library:
Use this library for icons Use the File Icon Vectors library:
https://github.com/dmhendricks/file-icon-vectors
Include the stylesheet via CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0/dist/file-icon-vectors.min.css">When displaying uploaded files, automatically detect the file extension and apply the correct icon class. Example:<span class="fiv-cla fiv-icon-[EXT]"></span> FileName.extUse a small helper that extracts the extension:const ext = filename.split('.').pop().toLowerCase();Then render:<span class="fiv-viv fiv-icon-${ext}"></span> ${filename}Make sure icons are aligned vertically and sized at 20px. Add CSS if needed.
If you want to implement a different library, just send ChatGPT the link and ask it to make a prompt for Google AI Studio. e.g.
I want to use this library in my Google AI Studio App: <link>. Analyse the setup & create a prompt I can copy and paste into the prompt window
Changes:
Review your app and add changes one by one accordingly.
( My files were opening in the ui but weren’t closing)
Let the user click out after the file is open.
After file is uploaded users should also be able to add notes.
Notes should appear in the preview too below file type.
Add option to delete files.
When a user selects text on the screen. it should fit the purple theme and not be yellow