mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 04:10:06 -05:00
image upload working
This commit is contained in:
@@ -50,15 +50,17 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Image Edit Placeholder
|
||||
<img src="{{ recipe.image.url }}" id="id_image" class="img img-fluid img-responsive"
|
||||
style="max-height: 20vh">
|
||||
<input type="file" @change="imageChanged">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="id_name"> {% trans 'Preperation Time' %}</label>
|
||||
<input class="form-control" id="id_prep_time" v-model="recipe.working_time">
|
||||
|
||||
<br/>
|
||||
<label for="id_name"> {% trans 'Waiting Time' %}</label>
|
||||
<input class="form-control" id="id_wait_time" v-model="recipe.waiting_time">
|
||||
|
||||
<br/>
|
||||
<label for="id_name"> {% trans 'Keywords' %}</label>
|
||||
<multiselect
|
||||
v-model="recipe.keywords"
|
||||
@@ -67,7 +69,7 @@
|
||||
:clear-on-select="true"
|
||||
:hide-selected="true"
|
||||
:preserve-search="true"
|
||||
placeholder="{% trans 'Select one' %}"
|
||||
placeholder="{% trans 'Select Keywords' %}"
|
||||
label="name"
|
||||
track-by="id"
|
||||
id="id_keywords"
|
||||
@@ -94,27 +96,6 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12" style="margin-top: 12px">
|
||||
<!--<div class="row" style="text-align: center">
|
||||
<div class="col-md-1 no-gutters">
|
||||
<b><i class="fas fa-arrows-alt-v"></i></b>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<b>{% trans 'Amount' %}</b>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<b>{% trans 'Unit' %}</b>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<b>{% trans 'Food' %}</b>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<b>{% trans 'Note' %}</b>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<i class="fa fa-trash"></i>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<draggable :list="step.ingredients" group="ingredients"
|
||||
:empty-insert-threshold="10" handle=".handle" @sort="sortStep(step)">
|
||||
<div class="col-md-12" v-for="ingredient, index in step.ingredients" :key="ingredient.id"
|
||||
@@ -206,6 +187,8 @@
|
||||
<button type="button" @click="updateRecipe(true)" class="btn btn-success">{% trans 'Save & View' %}</button>
|
||||
<button type="button" @click="updateRecipe(false)" class="btn btn-info">{% trans 'Save' %}</button>
|
||||
<button type="button" @click="addStep()" class="btn btn-primary">{% trans 'Add Step' %}</button>
|
||||
<a href="{% url 'view_recipe' recipe.pk %}" @click="addStep()"
|
||||
class="btn btn-secondary">{% trans 'View Recipe' %}</a>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
@@ -257,7 +240,8 @@
|
||||
})
|
||||
},
|
||||
updateRecipe: function (view_after) {
|
||||
this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe).then((response) => {
|
||||
this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe,
|
||||
{}).then((response) => {
|
||||
console.log(view_after)
|
||||
console.log(response)
|
||||
if (view_after) {
|
||||
@@ -266,6 +250,28 @@
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
imageChanged: function (event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
let fd = new FormData()
|
||||
fd.append('image', event.target.files[0])
|
||||
this.$http.put("{% url 'api:recipe-detail' recipe.pk %}" + 'image/', fd,
|
||||
{headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
|
||||
console.log(response)
|
||||
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
|
||||
let reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
$('#id_image').attr('src', e.target.result);
|
||||
}
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
addStep: function () { //TODO see if default can be generated from options request
|
||||
this.recipe.steps.push(
|
||||
@@ -290,7 +296,6 @@
|
||||
if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}')) {
|
||||
step.ingredients = step.ingredients.filter(item => item !== ingredient)
|
||||
}
|
||||
|
||||
},
|
||||
searchKeywords: function (query) {
|
||||
this.keywords_loading = true
|
||||
|
||||
Reference in New Issue
Block a user