diff --git a/apps/studio/src/components/Editor/EditorDropdown.tsx b/apps/studio/src/components/Editor/EditorDropdown.tsx
index 34cbd5ddf..bc7456c90 100644
--- a/apps/studio/src/components/Editor/EditorDropdown.tsx
+++ b/apps/studio/src/components/Editor/EditorDropdown.tsx
@@ -39,6 +39,7 @@ export const EditorDropdown: React.FunctionComponent<EditorDropdownProps> = () =
     >
       <input
         type="file"
+        accept='.yaml, .yml, .json'
         style={{ position: 'fixed', top: '-100em' }}
         onChange={event => {
           toast.promise(editorSvc.importFile(event.target.files), {
@@ -53,7 +54,7 @@ export const EditorDropdown: React.FunctionComponent<EditorDropdownProps> = () =
             error: (
               <div>
                 <span className="block text-bold text-red-400">
-                Failed to import document.
+                Failed to import document. Maybe the file type is invalid.
                 </span>
               </div>
             ),
diff --git a/apps/studio/src/services/editor.service.tsx b/apps/studio/src/services/editor.service.tsx
index 9157bc83f..7b98a809a 100644
--- a/apps/studio/src/services/editor.service.tsx
+++ b/apps/studio/src/services/editor.service.tsx
@@ -131,6 +131,15 @@ export class EditorService extends AbstractService {
     if (!file) {
       return;
     }
+    
+    // Check if file is valid (only JSON and YAML are allowed currently) ----Change afterwards as per the requirement
+    if (
+      file.type !== 'application/json' &&
+      file.type !== 'application/x-yaml' &&
+      file.type !== 'application/yaml'
+    ) {
+      throw new Error('Invalid file type');
+    }
 
     const fileReader = new FileReader();
     fileReader.onload = fileLoadedEvent => {