Skip to content

Commit 5b460b5

Browse files
niranjan94SaptakS
niranjan94
authored and
SaptakS
committed
Fixed image-upload-component binding issues (#3143)
1 parent 8832c8a commit 5b460b5

File tree

6 files changed

+33
-30
lines changed

6 files changed

+33
-30
lines changed

‎app/static/js/events/wizard/upload-component.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
function resetFormElement(e) {
2+
e = $(e);
3+
e.wrap('<form>').closest('form').get(0).reset();
4+
e.unwrap();
5+
}
6+
17
Vue.component('image-upload', {
28
props: {
39
title: {
@@ -53,21 +59,18 @@ Vue.component('image-upload', {
5359
}
5460
};
5561
}
62+
},
63+
value: {
64+
type: String
5665
}
5766
},
5867
data: function () {
5968
return {
6069
isUploading: false,
6170
errorMessage: '',
62-
componentId: 'upload-component-' + _.random(1000, 9999),
63-
internalImageUrl: ''
71+
componentId: 'upload-component-' + _.random(1000, 9999)
6472
};
6573
},
66-
watch: {
67-
internalImageUrl: function (value) {
68-
this.$emit('input', String(value));
69-
}
70-
},
7174
template: '#image-upload-template',
7275
methods: {
7376
uploadImage: function (e) {
@@ -114,6 +117,9 @@ Vue.component('image-upload', {
114117
});
115118
});
116119
},
120+
deleteImage: function () {
121+
this.$emit('input', '');
122+
},
117123
uploadImageToServer: function (imageData, callback) {
118124
var $this = this;
119125
$this.isUploading = true;
@@ -126,7 +132,7 @@ Vue.component('image-upload', {
126132
},
127133
dataType: 'json'
128134
}).done(function (data) {
129-
$this.internalImageUrl = data.image_url;
135+
$this.$emit('input', String(data.image_url));
130136
callback();
131137
}).fail(function () {
132138
$this.errorMessage = "Something went wrong. Please try again.";
@@ -138,7 +144,6 @@ Vue.component('image-upload', {
138144
},
139145
mounted: function () {
140146
this.$nextTick(function () {
141-
this.internalImageUrl = _.clone(this.imageUrl);
142147
var $div = $(this.$el);
143148
if (this.cropRequired) {
144149
this.$uploadCropperModal = $div.find('.cropper-modal');

‎app/static/js/events/wizard/vue-app.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,8 @@ var app = new Vue({
144144
}
145145
},
146146
'step': function (step) {
147-
history.replaceState(null, '', "./" + step);
147+
step = (step === "") ? step : step + "/";
148+
history.replaceState(null, '', "/events/" + this.event.id + "/edit/" + step);
148149
}
149150
},
150151
methods: {

‎app/templates/gentelella/users/events/wizard/basic-details.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,6 @@
163163
<image-upload title="Event Image"
164164
help-text="We recommend using at least a 2160x1080px (2:1 ratio) image"
165165
icon="fa-camera-retro"
166-
v-bind:image-url="event.background_url"
167166
v-bind:crop-required="true"
168167
v-model="event.background_url" v-bind:max-size-in-mb="10"></image-upload>
169168
</div>
@@ -172,7 +171,6 @@
172171
<div class="col-md-7 col-xs-12">
173172
<image-upload title="Logo" icon="fa-file-image-o"
174173
v-model="event.logo"
175-
v-bind:image-url="event.logo"
176174
v-bind:max-size-in-mb="1"></image-upload>
177175
</div>
178176
</div>

‎app/templates/gentelella/users/events/wizard/components/image-upload.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script type="text/x-template" id="image-upload-template">
22
<div>
3-
<div class="item form-group" v-if="!internalImageUrl || internalImageUrl == ''">
3+
<div class="item form-group" v-if="!value || value == ''">
44
<label>{{ '{{ title }}' }}</label><br>
55
<div class="image-box">
66
<input type="file" v-bind:id="componentId" class="image-upload-btn no-js" accept="image/*"
@@ -26,10 +26,10 @@ <h3>{{ '{{ title }}' }} {{ _("is uploading") }}</h3>
2626
</span>
2727

2828
</div>
29-
<div class="item form-group" v-if="internalImageUrl && internalImageUrl != ''">
29+
<div class="item form-group" v-if="value && value != ''">
3030
<label>{{ '{{ title }}' }}</label><br>
31-
<img v-bind:src="internalImageUrl" style="max-width: 300px; max-height: 300px"><br><br>
32-
<button type="button" class="btn btn-sm btn-default" v-on:click="internalImageUrl = ''">
31+
<img v-bind:src="value" style="max-width: 300px; max-height: 300px"><br><br>
32+
<button type="button" class="btn btn-sm btn-default" v-on:click="deleteImage">
3333
<i class="fa fa-trash-o" aria-hidden="true"></i>
3434
{{ _("Remove") }}
3535
</button>

‎app/templates/gentelella/users/events/wizard/sponsors.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ <h2 style="font-weight: 300;">Turn <span class="state" v-show="sponsors_enabled"
5050
<div class="col-md-8 col-sm-12 col-xs-12">
5151
<image-upload title="Logo" icon="fa-file-image-o"
5252
v-model="sponsor.logo"
53-
v-bind:image-url="sponsor.logo"
5453
v-bind:max-size-in-mb="1"></image-upload>
5554
</div>
5655
</div>

‎app/templates/gentelella/users/events/wizard/wizard.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -124,25 +124,25 @@ <h1 style="font-weight: 100; margin-top: 0;" id="page-title">{{ self.title() }}<
124124
<script src="{{ url_for('static', filename='js/events/event-wizard.js') }}"></script>
125125

126126
{# Common wizard Vue components #}
127-
<script src="{{ url_for('static', filename='js/events/wizard/button-component.js') }}"></script>
128-
<script src="{{ url_for('static', filename='js/events/wizard/upload-component.js') }}"></script>
129-
<script src="{{ url_for('static', filename='js/events/wizard/tabs-component.js') }}"></script>
127+
<script src="{{ url_for('static', filename='js/events/wizard/button-component.js') }}?timestamp=1486195583"></script>
128+
<script src="{{ url_for('static', filename='js/events/wizard/upload-component.js') }}?timestamp=1486195583"></script>
129+
<script src="{{ url_for('static', filename='js/events/wizard/tabs-component.js') }}?timestamp=1486195583"></script>
130130

131131
{# Vue models, components for basic details #}
132-
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/classic.js') }}"></script>
133-
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/vue-models.js') }}"></script>
134-
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/vue-components.js') }}"></script>
135-
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/initializer.js') }}"></script>
132+
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/classic.js') }}?timestamp=1486195583"></script>
133+
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/vue-models.js') }}?timestamp=1486195583"></script>
134+
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/vue-components.js') }}?timestamp=1486195583"></script>
135+
<script src="{{ url_for('static', filename='js/events/wizard/basic-details/initializer.js') }}?timestamp=1486195583"></script>
136136

137137
{# Vue models, components for sponsors #}
138-
<script src="{{ url_for('static', filename='js/events/wizard/sponsors/vue-models.js') }}"></script>
139-
<script src="{{ url_for('static', filename='js/events/wizard/sponsors/initializer.js') }}"></script>
138+
<script src="{{ url_for('static', filename='js/events/wizard/sponsors/vue-models.js') }}?timestamp=1486195583"></script>
139+
<script src="{{ url_for('static', filename='js/events/wizard/sponsors/initializer.js') }}?timestamp=1486195583"></script>
140140

141141
{# Vue models, components for session & speakers #}
142-
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/classic.js') }}"></script>
143-
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/vue-models.js') }}"></script>
144-
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/vue-components.js') }}"></script>
145-
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/initializer.js') }}"></script>
142+
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/classic.js') }}?timestamp=1486195583"></script>
143+
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/vue-models.js') }}?timestamp=1486195583"></script>
144+
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/vue-components.js') }}?timestamp=1486195583"></script>
145+
<script src="{{ url_for('static', filename='js/events/wizard/sessions-speakers/initializer.js') }}?timestamp=1486195583"></script>
146146

147147
{# Vue app #}
148148
<script src="{{ url_for('static', filename='js/events/wizard/vue-app.js') }}?timestamp=1483801089"></script>

0 commit comments

Comments
 (0)