Hello I'm confused on how should I pass collections/data to another component so I can display it in another component (in this case I'm showing discounts so it will be a section with popular discounts and another section showing latest discounts).
So i have this index.blade.php and i'm a bit confused on how to pass the data to x-discount-card component so I can access to $discount->title on the component. Right now I get "undefined variable $discount" so it seems i'm not accessing it right.
<x-layout>
<main>
#include('components.categories-row')
#include('discounts._best')
<section class="w-4/6 mx-auto my-8 font-bold flex flex-col items-center justify-center">
<h1 class="uppercase text-main-gray text-4xl bold self-start text-center mb-4 ">Últimos Descuentos</h1>
#if($discounts->count())
#foreach($discounts as $discount)
<x-discount-card :discount="$discount" />
#endforeach
#else
<p class="my-8 text-center">No hay descuentos disponibles. Por favor vuelva mas tarde. </p>
#endif
</section>
</main>
</x-layout>
discount-component
#props(['discount'])
<div
class="w-[20rem] h-auto bg-gradient-to-b from-card-light-gray to-card-main-gray p-6 rounded-2xl drop-shadow-xl md:w-[35rem] lg:w-[35rem] lg:w-[50rem] lg:h-auto mb-4">
<div class="flex-col items-center text-center justify-center h-full lg:grid lg:grid-cols-4 lg:grid-rows-4">
<a href="" class="flex justify-center lg:row-span-4 lg:-ml-10">
<img class="h-full " src="/images/pngwing.com.png" alt="" width="120" height="120">
</a>
<div
class="flex-col justify-center items-center text-center w-full lg:col-start-2 lg:col-span-full lg:row-start-1 lg:row-span-full lg:-ml-14">
<a href="/discount/1" class="lg:grid lg:row-start-2">
<h2 class="text-white font-bold text-lg md:text-2xl lg:my-2">{{ $discount->title }}</h2>
<div class="flex my-4 items-center text-center justify-center lg:my-2">
<p class="text-price-color font-bold mr-8 text-xl md:text-2xl">139,99€</p>
<p class="line-through text-white text-lg md:text-lg">149,99 (-10€)</p>
</div>
<p class="text-white my-8 text-sm md:text-lg lg:my-4">Bambas nike con 10€ de descuento y envio gratis.
Salen a
139,99€</p>
</a>
<div
class="flex-col items-center justify-center gap-2 lg:flex-row lg:inline-flex lg:col-start-2 lg:col-span-full lg:row-start-4 lg:row-end-5">
<a class="flex items-center justify-center my-2 " href="/user/1">
<img class="rounded-full mr-2" src="https://i.pravatar.cc/35"
alt="">
<p class="mr-4 text-white text-sm font-bold transition-transform hover:translate-x-0.5 md:text-lg">
JohnDoe</p>
</a>
<div class="flex items-center justify-center my-4 gap-4 lg:mx-4">
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/heart.png" alt="" width="22" height="22">
</div>
<div
class="border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer">
<img class="h-full" src="/images/dislike.png" alt="" width="22" height="22">
</div>
<div
class="flex items-center border border-light-gray p-1 rounded-md transition-transform hover:-translate-y-0.5 cursor-pointer lg:px-4">
<img class="h-full" src="/images/comment.png" alt="" width="22" height="22">
<p class="text-light-gray ml-2">10</p>
</div>
</div>
<div class="flex justify-center lg:w-[250px] lg:-mr-14">
<button
class="flex my-4 items-center justify-center bg-gradient-to-b from-button-light-orange to-button-dark-orange p-2 rounded-md transition-transform hover:-translate-y-0.5 md:p-4 lg:w-full ">
<p class="text-light-gray mr-4 font-bold text-sm md:text-lg ">Ver Chollo</p>
<img src="/images/external-link.png" alt="" width="20" height="20">
</button>
</div>
</div>
</div>
</div>
<div
class="w-auto absolute top-5 left-5 flex-col items-center justify-center rounded-2xl bg-button-light-orange p-2 drop-shadow-lg md:flex-row md:inline-flex">
<p class="text-white text-xs uppercase font-bold mr-2 md:text-sm ">10%</p>
<p class="text-white text-xs uppercase font-bold md:text-sm ">descuento</p>
</div>
</div>
Also on the routes file i'm passing discounts but i'm a bit confused on how should I pass the data because right now i'm getting "undefined variable $discount error"
Route::get('/', function () {
return view('discounts.index', [
'discounts' => Discount::all(),
// ->where('premium','=',false)
'categories' => Category::all()
]);
})->name('home');
On the discounts._best component i'll display the discounts with more likes but this will be done in the future but I share the component too because maybe something there is what is causing the error.
<section class=" w-full text-center h-3/4 bg-light-gray flex flex-col items-center justify-center p-10">
<h1 class="uppercase text-main-gray mb-8 text-4xl font-bold">Descuentos Populares</h1>
<x-discount-card />
</section>
I searched on the Laravel Documentation about Component attributes but I dont know what i'm doing wrong and still confused.
<template>
<div>
<Header></Header>
<div class=" flex justify-center items-center" v-if="!item && !product">
<div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
</div>
<div v-else>
<div class="grid md:grid-cols-2 my-5">
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<div class="mr-16 ">
<div class="grid grid-cols-4 text-5xl mb-3">
<p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Region</p>
<p class="inline text-justify col-span-3">{{product.region}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Growing Altitude</p>
<p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Arabica Variety</p>
<p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Milling Process</p>
<p class="inline text-justify col-span-3">{{product.milling_process}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Aroma</p>
<p class="inline text-justify col-span-3">{{product.aroma}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Flavor</p>
<p class="inline text-justify col-span-3">{{product.flavor}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Body</p>
<p class="inline text-justify col-span-3">{{product.body}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Acidity</p>
<p class="inline text-justify col-span-3">{{product.acidity}}</p>
</div>
<div class="grid grid-cols-4 mt-4 p-2">
<p class="inline col-span-1">Price</p>
<p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
</div>
<div class="p-2 grid grid-cols-4">
<p class="inline col-span-1">Quantity</p>
<input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
</div>
<div class="p-2">
<button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">
<span>Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: "ViewItem",
data(){
return{
product:null,
quantity:0,
}
},
components:{
Header,
},
methods:{
addToCart(){
var itemToCart ={
product: this.product,
item: this.item,
quantity: +this.quantity,
};
if(itemToCart.quantity>0){
this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
}
}
},
computed:{
item(){
var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id);
return item;
},
}
};
</script>
<style></style>
<template>
<div>
<Header></Header>
<div class=" flex justify-center items-center" v-if="!item && !product">
<div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
</div>
<div v-else>
<div class="grid md:grid-cols-2 my-5">
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<div class="mr-16 ">
<div class="grid grid-cols-4 text-5xl mb-3">
<p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Region</p>
<p class="inline text-justify col-span-3">{{product.region}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Growing Altitude</p>
<p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Arabica Variety</p>
<p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Milling Process</p>
<p class="inline text-justify col-span-3">{{product.milling_process}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Aroma</p>
<p class="inline text-justify col-span-3">{{product.aroma}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Flavor</p>
<p class="inline text-justify col-span-3">{{product.flavor}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Body</p>
<p class="inline text-justify col-span-3">{{product.body}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Acidity</p>
<p class="inline text-justify col-span-3">{{product.acidity}}</p>
</div>
<div class="grid grid-cols-4 mt-4 p-2">
<p class="inline col-span-1">Price</p>
<p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
</div>
<div class="p-2 grid grid-cols-4">
<p class="inline col-span-1">Quantity</p>
<input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
</div>
<div class="p-2">
<button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">
<span>Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: "ViewItem",
data(){
return{
product:null,
quantity:0,
}
},
components:{
Header,
},
methods:{
addToCart(){
var itemToCart ={
product: this.product,
item: this.item,
quantity: +this.quantity,
};
if(itemToCart.quantity>0){
this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
}
}
},
computed:{
item(){
var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id);
return item;
},
}
};
</script>
<style></style>
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<template>
<div>
<Header></Header>
<div class=" flex justify-center items-center" v-if="!item && !product">
<div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
</div>
<div v-else>
<div class="grid md:grid-cols-2 my-5">
<div>
<img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
</div>
<div class="mr-16 ">
<div class="grid grid-cols-4 text-5xl mb-3">
<p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Region</p>
<p class="inline text-justify col-span-3">{{product.region}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Growing Altitude</p>
<p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Arabica Variety</p>
<p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Milling Process</p>
<p class="inline text-justify col-span-3">{{product.milling_process}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Aroma</p>
<p class="inline text-justify col-span-3">{{product.aroma}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Flavor</p>
<p class="inline text-justify col-span-3">{{product.flavor}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Body</p>
<p class="inline text-justify col-span-3">{{product.body}}</p>
</div>
<div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
<p class="inline col-span-1">Acidity</p>
<p class="inline text-justify col-span-3">{{product.acidity}}</p>
</div>
<div class="grid grid-cols-4 mt-4 p-2">
<p class="inline col-span-1">Price</p>
<p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
</div>
<div class="p-2 grid grid-cols-4">
<p class="inline col-span-1">Quantity</p>
<input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
</div>
<div class="p-2">
<button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">
<span>Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: "ViewItem",
data(){
return{
product:null,
quantity:0,
}
},
components:{
Header,
},
methods:{
addToCart(){
var itemToCart ={
product: this.product,
item: this.item,
quantity: +this.quantity,
};
if(itemToCart.quantity>0){
this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
}
}
},
computed:{
item(){
var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id);
return item;
},
}
};
</script>
<style></style>
the image exists and is outputted in other components, but not in this component. I fetch the product object from the state using the item.product_id. It fetches the product, and populates the region, growing altitude.....etc and also the image path. In the DOM the image path is filled properly but it shows a "could not load image" error, then shows the alt text "Extol Coffee". The image path works fine as other components use it and display there image.
to display the image dynamically
Have you check the console and see theres no error request for image ? If all clear then something wrong with this 'w-full h-52 md:h-96 md:w-96 mx-auto' class, i suggest to clear those classes and see the results.
I am a beginner to Tailwind CSS. And I am finding it difficult to create a button design as shown in the picture in tailwind Css
So I want to display that little bar on the right when the individual section like eg. Home,Trends,Feed are pressed. So can you please help me out with it. I want the answer in tailwind css.
Here is the code:
<div className="flex">
<div className="w-72 bg-white text-gray-100 shadow-lg">
<div class="flex h-full flex-col p-7 pl-8 text-sm">
<div class="relative flex w-full items-center justify-between">
<a class="flex space-x-5 py-5 text-slate-800">
<MusicNoteIcon class="h-5 w-5"></MusicNoteIcon>
<p class="font-semibold">Sovereignty Kingdom</p>
</a>
<button class="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
<SwitchHorizontalIcon class="h-5 w-5"></SwitchHorizontalIcon>
</button>
</div>
<nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
<HomeIcon className="h-5 w-5" />
<p>Home</p>
</nav>
<nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
<TrendingUpIcon className="h-5 w-5" />
<p>Trends</p>
</nav>
<nav className="delay-50 duration-2 cursor-pointer00 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
<RssIcon className="h-5 w-5" />
<p>Feed</p>
</nav></div>
</div>
</div>```
I'm not sure if this is the only solution, but this worked for me:
The first thing I did was define an array for the buttons group :
const elements=[
{name:'Home',ico:faHome}, //I'm using font awesome Icons,you can use yours
{name:'Trend',ico:faFireAlt},
{name:'Feed',ico:faFeed}
]
then I defined a state so that I know which button was clicked like
//(-1) is the button id, default (-1) so that the bar won't render by default
const [clickedId, setClickedId] = useState(-1);
Here is the full code:
<div className='flex m-14 w-72 '>
<div className="w-full bg-white text-gray-100 shadow-lg">
<div className="flex h-full flex-col p-7 pl-8 text-sm">
<div className="relative flex w-full items-center justify-between">
<a className="flex space-x-5 py-5 text-slate-800">
<div className="h-5 w-5 bg-teal-800 rounded-full"></div>
<p className="font-semibold">Sovereignty Kingdom</p>
</a>
<button className="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
<div className="h-5 w-5 bg-teal-800 rounded-full"></div>
</button>
</div>
{/* map over the buttons array to render them */}
{elements.map((el,id)=>(
{/* give every button a key */}
<button key={id} name={el.name}
{/* when a button is clicked assign clickedId to the current button id */}
onClick={() => setClickedId(id)}
{/* based on the button id append classes to make the sidebar */}
className={`relative delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3
text-slate-800 transition duration-75 ease-in-out hover:-translate-y-1
hover:scale-110 hover:bg-black hover:text-white
${(id === clickedId) ?`after:w-1 after:h-12 after:bg-black after:rounded-full after:absolute after:-right-7
hover:after:transition hover:after:duration-75 hover:after:-right-4 hover:after:ease-in-out`:'' }`}>
<FontAwesomeIcon className='h-5 w-5 ' icon={el.ico}/>
<p>{el.name}</p>
</button>
))}
</div>
</div>
</div>
or check it Live on codesandbox.
I'm using laravel livewire and I've created a page that you can select a date for when you want the post
to publish. When I create a new post and save the date then it saves fine in the database, but if I try
to edit the post and change the date the date that I saved in the database isn't showing in the form.
Here is my code.
My EditPost.php
<?php
namespace App\Http\Livewire;
use App\Models\Post;
use Livewire\Component;
class EditPost extends Component
{
public $name;
public $publishDate;
public Post $post;
public function mount(Post $post)
{
$this->name = $post->name;
$this->publishDate = $post->publish_date;
}
public function render()
{
return view('livewire.edit-post');
}
}
and this is my edit.blade.php
<div>
<div class="mt-10 sm:mt-0">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium leading-6 text-gray-900">Edit Post</h3>
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="form">
<div class="shadow overflow-hidden sm:rounded-md">
<div class="px-4 py-5 bg-white sm:p-6">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="name" class="block text-sm font-medium leading-5 text-gray-700">Name</label>
<input id="name" wire:model="name" class="#error('name') border border-red-500 #enderror mt-1 form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">
#error('name')
<small>
<div class="text-red-500">{{ $message }}</div>
</small>
#enderror
</div>
<div class="col-span-6 sm:col-span-4">
<label for="publish_date" class="block text-sm font-medium leading-5 text-gray-700">Publish Date</label>
<input id="publish_date" wire:model="publishDate" type="date" class="mt-1 form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button wire:click="editPost" class="py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-500 focus:outline-none focus:shadow-outline-blue active:bg-indigo-600 transition duration-150 ease-in-out">
Save
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I need help with this.
I am using fineUploader and I would like to not display the upload list.
My current template :
<div>
<script type="text/template" id="qq-template-manual-trigger">
<div class="qq-uploader-selector baz-uploader" qq-drop-area-text="{{dropZoneText}}">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="buttons">
<div class="qq-upload-button-selector qq-upload-button">
<div>{{::selectFilesButton}}</div>
</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>{{::processing}}</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner baz-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" width="30" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Annuler</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Réessayer</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
<div id="baz-fine-uploader"></div>
I have tried to remove the ul tag "qq-upload-list-selector" directly but the drop zone is no longer display.