diff --git a/cookbook/templates/url_import.html b/cookbook/templates/url_import.html
index 6c4d28a0..c915338a 100644
--- a/cookbook/templates/url_import.html
+++ b/cookbook/templates/url_import.html
@@ -44,7 +44,7 @@
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Manual
                     </label>
                 </div>
-                <div class="input-group mb-3">
+                <div class="input-group my-2">
                 <input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
                 <div class="input-group-append">
                     <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
@@ -57,25 +57,36 @@
             <!-- Import from Recipe Application -->
             <div class=" tab-pane fade show" id="nav-app" role="tabpanel">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-outline-info btn-sm active" @click="recipe_app='tandoor'">
+                    <label class="btn btn-outline-info btn-sm active" @click="recipe_app='DEFAULT'">
                     <input type="radio" name="auto" id="auto" autocomplete="off" checked> Tandoor
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='paprika'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='PAPRIKA'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Paprika
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='nextcloud'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='NEXTCLOUD'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Nextcloud Cookbook
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='mealie'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALIE'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Mealie
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='chowdown'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='CHOWDOWN'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Chowdown
                     </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='safron'">
+                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='SAFRON'">
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Safron
                     </label>
                 </div>
+                <b-form-file
+                    class="my-2"
+                    accept=".zip"
+                    multiple
+                    v-model="recipe_files"
+                    placeholder="{% trans 'Select recipe files to import or drop them here...' %}"
+                    drop-placeholder="Drop recipe files here...">
+                </b-form-file>
+                <button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button"
+                            id="id_btn_app"><i class="fas fa-file-archive"></i> {% trans 'Import' %} 
+                </button>
             </div>
 
             <!-- Import JSON or HTML -->
@@ -89,13 +100,12 @@
                     <input type="radio" name="auto" id="manual" autocomplete="off"> Manual
                     </label>
                 </div>
-                <div class="input-group input-group-lg">
+                <div class="input-group my-2">
                     <textarea class="form-control input-group-append" v-model="source_data" rows=10 placeholder="{% trans 'Paste json or html source here to load recipe.' %}" style="font-size: 12px">
                     </textarea>
                 </div>
-                <br>
-                <button @click="loadSource()" class="btn btn-primary shadow-none" type="button"
-                            id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %} 
+                <button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button"
+                            id="id_btn_app"><i class="fas fa-code"></i> {% trans 'Import' %} 
                 </button>
             </div>
         </div>
@@ -542,7 +552,8 @@
                 recipe_json: undefined,
                 recipe_tree: undefined,
                 automatic: true,
-                recipe_app: 'tandoor'
+                recipe_app: 'DEFAULT',
+                recipe_files: []
             },
             directives: {
                 tabindex: {
@@ -660,6 +671,25 @@
                         this.makeToast(gettext('Error'), gettext('An error occurred while trying to import this recipe!') + err.bodyText, 'danger')
                     })
                 },
+                importAppRecipe: function() {
+                    this.error = undefined
+                    this.loading = true
+                    let formData = new FormData();
+                    let files = []
+                    formData.append('type', this.recipe_app);
+                    for( var i = 0; i < this.recipe_files.length; i++ ){
+                        formData.append('files', this.recipe_files[i]);
+                        }
+                    this.$http.post("{% url 'view_import' %}", formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
+                        console.log(response.data)
+                        window.location.href = "{% url 'view_import_response' 1237654 %}".replace('1237654', response.data['import_id'])
+                    }).catch((err) => {
+                        this.error = err.data
+                        this.loading = false
+                        console.log(err)
+                        this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
+                    })
+                },
                 deleteIngredient: function (i) {
                     this.recipe_data.recipeIngredient = this.recipe_data.recipeIngredient.filter(item => item !== i)
                 },
diff --git a/cookbook/views/import_export.py b/cookbook/views/import_export.py
index 8e8e03e9..365b30de 100644
--- a/cookbook/views/import_export.py
+++ b/cookbook/views/import_export.py
@@ -3,7 +3,7 @@ import threading
 from io import BytesIO
 
 from django.contrib import messages
-from django.http import HttpResponseRedirect
+from django.http import HttpResponseRedirect, JsonResponse
 from django.shortcuts import render
 from django.urls import reverse
 from django.utils.translation import gettext as _
@@ -68,9 +68,15 @@ def import_recipe(request):
                 t.setDaemon(True)
                 t.start()
 
-                return HttpResponseRedirect(reverse('view_import_response', args=[il.pk]))
+                return JsonResponse({'import_id': [il.pk]})
             except NotImplementedError:
-                messages.add_message(request, messages.ERROR, _('Importing is not implemented for this provider'))
+                return JsonResponse(
+                    {
+                        'error': True,
+                        'msg': _('Importing is not implemented for this provider')
+                    },
+                    status=400
+                )
     else:
         form = ImportForm()